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 geocoder;
var map;
var markersArray = [{position: {lat: 40.7127837,lng: -74.0059413}},
{position: {lat: 40.735657,lng: -74.1723667}},
{position: {lat:39.2903848,lng: -76.6121893}},
{position: {lat: 39.9525839,lng: -75.1652215}}
];

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();
  var bounds = new google.maps.LatLngBounds();
  for (var z = 0; z < markersArray.length; z++) {
    geocoder.geocode({
      'location': markersArray[z].position
    }, (function(z) {
      // get function closure on z
      return function(results, status) {

        if (status == 'OK') {
          if (results != null) {
            var address = z + " : " + results[0].formatted_address + "<br>";
            var marker = new google.maps.Marker({
              position: markersArray[z].position,
              title: address,
              map: map
            });
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
            google.maps.event.addListener(marker,'click', function(evt) {
               infowindow.setContent(address);
               infowindow.open(map, this);
            })
          } else {
            var address = z + " : " + "Unknown Address" + "<br>";
          }
        } else {
          var address = z + " : " + "Unknown Address" + "<br>";
        }
      }
    })(z));
  }
}
google.maps.event.addDomListener(window, "load", initialize);