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>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>

CSS

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: white;
}

JavaScript

var map;

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(43.23395, -84.58872),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var bounds = new google.maps.LatLngBounds();
  map.data.addListener('addfeature', function(evt) {
    if (evt.feature.getGeometry().getType() == "Point") {


      var coord = evt.feature.getGeometry().get();
      bounds.extend(coord);
      map.fitBounds(bounds);
      var labelText = evt.feature.getProperty("Name");
      var labelDiv = document.createElement("div");
      labelDiv.innerHTML = labelText;
      labelDiv.setAttribute("id", "label");

      var myOptions = {
        content: labelDiv,
        boxStyle: {
          border: "none",
          textAlign: "center",
          // fontSize: labelFontSize,
          width: "50px"
        },
        disableAutoPan: true,
        pixelOffset: new google.maps.Size(-25, 0),
        position: coord,
        closeBoxURL: "",
        isHidden: false,
        pane: "mapPane",
        enableEventPropagation: true
      };

      var ibLabel = new InfoBox(myOptions);
      ibLabel.open(map);
    }
  });

  map.data.addGeoJson(geoJson);
}
google.maps.event.addDomListener(window, "load", initialize);

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.69729, 43.24808]
      },
      "properties": {
        "Name": "Name 1",
        "Address": "My Address",
        "City": "town",
        "State": "ST",
        "Zip": 12345,
        "Group": "Newark"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [-84.58872, 43.23395]
      },
      "properties": {
        "Name": "Name 2",
        "Address": "another address",
        "City": "town",
        "State": "ST",
        "Zip": 12345,
      ...