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;

function initialize() {
  var 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
    });
  var bounds = new google.maps.LatLngBounds();
// Markers & infoWindows
  var markers = [];
  var infoWindows = [];

  for (var i = 0; i < myList.length; i++) {
    markers.push(
      new google.maps.Marker({
        position: myList[i].coord,
        map: map,
        title: myList[i].city
      })
    );
    infoWindows.push(
      new google.maps.InfoWindow({
        content: myList[i].address
      })
    );
    markers[i].addListener('click', (function(i) {
    return function() {
      infoWindows[i].open(map, markers[i]);
    }}(i)));
    
    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var myList = [{
coord: {
  lat: 42,
  lng: -72
},
city: "Somewhere",
address: "Somewhere"
}, {
coord: {
  lat: 40.7127837,
  lng: -74.0059413
},
city: "New York, NY, USA",
address: "New York, NY, USA"
}, {
coord: {
  lat: 40.735657,
  lng: -74.1723667
},
city: "Newark, NJ, USA",
address: "Newark, NJ, USA"
}];