JSFiddle - React, Tailwind, and code Playground

by victorxpp

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter in the call to the Google Maps JavaScript API URL below with your own API key. -->
<div id="log"></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--<<script src="https://cdn.sobekrepository.org/includes/gmaps-markerwithlabel/1.9.1/gmaps-markerwithlabel-1.9.1.min.js"></script>-->
<!--<<script src="https://cdn.sobekrepository.org/includes/gmaps-markerwithlabel/1.9.1/gmaps-markerwithlabel-1.9.1.min.js"></script>-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAhqjL8KBMkce_1YkgaOM8TiC09Uy9HuT8&callback=initialiseMap"></script>
<script defer src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js"></script>
<script  src="https://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>

CSS

#map {
  height: 800px;
  width: 800px;
}

.labels {
  width: 50px; height: 18px;

  border: 1px solid #ffc966;
  border-radius: 5px;

  background: #fee1d7;
  color: #332100;
  text-align: center;
  line-height: 20px;

  font-weight: bold;
  font-size: 13px;
}

JavaScript

var map;
var locations = [];

function initialiseMap() {

  $.getJSON("https://sheets.googleapis.com/v4/spreadsheets/15WX-Gu8MeU1u6cPvYX6Rcc7x2pssGmwjkOrqgt2inXQ/values/Sheet1!A2:K?key=AIzaSyAhqjL8KBMkce_1YkgaOM8TiC09Uy9HuT8", function(data) {

        $(data.values).each(function() {
                var location = {};
                                location.title = this[1];
                                location.latitude = parseFloat(this[4]);
                location.longitude = parseFloat(this[5]);
                location.institution = this[1];
                location.department = this[2];
                location.funder = this[3];
                location.url = this[7];
                location.color = this[6];
                location.mob = this[8];
                location.start = this[9];
                location.end = this[10];
                
                            locations.push(location);
        });

      // Center on (0, 0). Map center and zoom will reconfigure later (fitbounds method)
      var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(0, 0)
      };
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      setLocations(map, locations);
  });
}



function setLocations(map, locations) {
  var bounds = new google.maps.LatLngBounds();
  // Create nice, customised pop-up boxes, to appear when the marker is clicked on
  var infowindow = new google.maps.InfoWindow({
    content: "Content String"
  });
   var oms = new OverlappingMarkerSpiderfier(map,
        {
        markersWontMove: true,
        markersWontHide: true,
        keepSpiderfied: true,
        nearbyDistance: 10,
      	circleFootSeparation: 50,
        });
          var baseJitter = 2.5;
    var clusterJitterMax = 0.1;
    var rnd = Math.random;
    var data = [];
    var clusterSizes = [1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 4, 5, 6, 7, 8, 9, 12, 18, 24];
    for (var n = 0; n < clusterSizes.length; n++) {
     ...