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 locations = [
  [{lat: 42,  lng: -72}, "Here"],
  [{lat: 42.1,lng: -72.1}, "There"]
];
var mapMarkers = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(42, -72),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (i = 0; i < locations.length; i++) {
    currentLocation = locations[i];

    var mapMarker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      // label: labels[i],
      title: locations[i][1],
      zoom: 18
    })

    mapMarkers.push(mapMarker);
    mapMarkers[i].addListener('click', markerClick(currentLocation));
  }
}

function markerClick(location) {
  return function(evt) {
    console.log("you clicked " + JSON.stringify(location));
  }
}
google.maps.event.addDomListener(window, "load", initialize);