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/markerclustererplus/src/markerclusterer.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

var originalPoints = [];

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();
    var gmarkers = [];
    console.log("snappedPoints.length="+roadsApiSnapToRoadResult.snappedPoints.length);
  for (var i = 0; i < roadsApiSnapToRoadResult.snappedPoints.length; i++) {
    var marker = new google.maps.Marker({
      position: {
        lat: roadsApiSnapToRoadResult.snappedPoints[i].location.latitude,
        lng: roadsApiSnapToRoadResult.snappedPoints[i].location.longitude,
      },
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      },
      title: ""+roadsApiSnapToRoadResult.snappedPoints[i].originalIndex,
      map: map
    });
    originalPoints[roadsApiSnapToRoadResult.snappedPoints[i].originalIndex] = roadsApiSnapToRoadResult.snappedPoints[i].originalIndex;
    gmarkers.push(marker);
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
  var markerClusterer = new MarkerClusterer(map, gmarkers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
  maxZoom: 18});
  var inputPoints = 0;
  for (var idx in originalPoints) {
    if (originalPoints.hasOwnProperty(idx)) {
      // console.log(idx);
      inputPoints++;
    }
  }
  console.log("number of input points="+inputPoints);
}
google.maps.event.addDomListener(window, "load", initialize);
var roadsApiSnapToRoadResult = {
  "snappedPoints": [{
      "location": {
        "latitude": 33.988152465043711,
        "longitude": -118.4704415352344
      },
      "originalIndex": 0,
      "placeId": "ChIJ07TI4bi6woARVzS3zNDS75A"
    },
    {
      "location": {
        "latitude":...