JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="googleMap"></div>

CSS

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var geoJson_features = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "id": 70,
      "name": "roman coin"
    },
    "geometry": {
      "type": "Point",
      "coordinates": [
      	-0.7318782806396484375,
        51.8924376272136740340
      ]
    }
  }]
};

function initialize() {

  // map properties
  var mapProp = {
    zoom: 17,
    zoomControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
      mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.SATELLITE,
        'night_hawk_style'
      ],
      style: google.maps.MapTypeControlStyle.HORIZONTAL,
      position: google.maps.ControlPosition.BOTTOM_RIGHT,
      backgroundColor: 'none'
    }
  };

  // google map object
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  // load GeoJSON.
  google.maps.event.addListenerOnce(map, 'idle', function() {

    // load GeoJSON.
    map.data.addGeoJson(geoJson_features);

    // create empty bounds object
    var bounds = new google.maps.LatLngBounds();

    // loop through features
    map.data.forEach(function(feature) {

      // get the features geometry
      var geo = feature.getGeometry();

      // loop through each coordinate
      geo.forEachLatLng(function(LatLng) {
        bounds.extend(LatLng);
      });

    });

    // fit data to bounds
    map.fitBounds(bounds);

  });


  // map data styles based on geo json properties
  map.data.setStyle(function(feature) {

    // statusColor
    var statusColor = 'transparent';

    // check feature property status
    if (feature.getProperty('status')) {
      statusColor = feature.getProperty('status');
    }

    // return the style for the feature
    return ({
      icon: {

        // set svg icon svg
        url: 'https://svgshare.com/i/8tN.svg',

        // this marker is 14 pixels wide by 12 pixels high.
        //size: new...