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://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<input id="mapbut" type="button" value="map" />
<div id="map"></div>

CSS

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

JavaScript

var Geo = {
  lat:  40.7281575,
  lng:  -74.07764
};
$(document).on('click', '#mapbut', function() {

  var items, distances, you_are_here = [],
    markers_data = [],
    markers_data2 = [],
    fred, clust1, markss;

/*  you_are_here.push({
    lat: Geo.lat,
    lng: Geo.lng,
    animation: google.maps.Animation.DROP,
    title: 'Your are here',
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    infoWindow: {
      content: '<p>You are Here</p>'
    }
  }); */

  function loadResults(data) {

    if (data.map.length > 0) {
      items = data.map;

      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var distances = [];
        var dist2;

        if (item.Lat != undefined && item.Lng != undefined) {

          markers_data.push({
            lat: item.Lat,
            lng: item.Lng,
            title: item.Site,
            infoWindow: {
              content: '<p>' + item.Site + '</p><p>' + Math.round(item.distance) + ' miles away</p>'
            }
          });

        }
      }
    }
    map = new GMaps({
      el: '#map',
      lat: Geo.lat,
      lng: Geo.lng,
      zoom: 8,
      mapTypeControl: false,
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
      },
      markerClusterer: function(map) {
        options = {
          gridSize: 50
        }

        clust1 = new MarkerClusterer(map, [], options);
        return clust1;
      },

      scaleControl: true,
      streetViewControl: false

    });
    map.addMarkers(markers_data);
    
  you_are_here = new google.maps.Marker({
    position: {lat: Geo.lat,lng: Geo.lng},
    animation: google.maps.Animation.DROP,
    title: 'Your are here',
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 10
    },
    infoWindow: {
      content: '<p>You are Here</p>'
    },
    map: map.map
  });    
    
    // map.addMarkers(you_are_here);
  }
  loadResults(data);
});
var...