JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas"></div>

CSS

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

JavaScript

var map,
  infoWindow = new google.maps.InfoWindow({
    pixelOffset: new google.maps.Size(0, -25)
  });

function initialize() {

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 10,
    center: {
      lat: 40.7127837,
      lng: -74.0059413
    }
  });

  // map.data.loadGeoJson('http://customers.auroracomputers.co.uk/customers-json.php');
  map.data.addGeoJson(testGeoJson)

  map.data.addListener('click', function(event) {
    infoWindow.setContent(
      'Surname: ' + event.feature.getProperty('surname') + '<br>' +
      'Postcode: ' + event.feature.getProperty('postcode')
    );
    var anchor = new google.maps.MVCObject();
    anchor.set("position", event.latLng);
    infoWindow.open(map, anchor);
  });

  var iconBase = 'http://customers.auroracomputers.co.uk/icons/'
  var icons = {
    business: {
      icon: iconBase + 'business.png'
    },
    home: {
      icon: iconBase + 'home.png'
    },
    competitor: {
      icon: iconBase + 'devil.png'
    }
  };

  map.data.setStyle(function(feature) {
    var type = feature.getProperty('type')
    return /** @type {google.maps.Data.StyleOptions} */ ({
      icon: icons[type].icon,
      title: type
    });
  });

}

google.maps.event.addDomListener(window, 'load', initialize);
// New York, NY, USA (40.7127837, -74.00594130000002)
// Newark, NJ, USA (40.735657, -74.1723667)
var testGeoJson = {
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-74.0059413, 40.7127837]
    },
    "properties": {
      "surname": "York",
      "postcode": " 10007",
      "type": "home"
    }
  }, {
    "type": "Feature",
    "geometry": {
      "type": "Point",
      "coordinates": [-74.1723667, 40.735657]
    },
    "properties": {
      "surname": "Newark",
      "postcode": "07102",
      "type": "business"
    }
  }]
};