JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,visualization&amp;ext=.js"></script>
<div id="map_canvas"></div>

CSS

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

JavaScript

var gmarkers = [];
var mapCenter = new google.maps.LatLng(37.782, -122.447);
function initialize() {
  var myOptions = {
    zoom: 15,
    center: mapCenter,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  current_zoom = map.getZoom();
  var myControl = document.getElementById('descripcion');
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(myControl);
  
  for (var i=0; i<heatMapData.length; i++) {
    // translate into obj expected by CreateMarker
    var obj = {lat: heatMapData[i].location.lat(),
               lon: heatMapData[i].location.lng(),
               nodo: "nodo"+i,
               llamados: heatMapData[i].weight,
               icono: "http://maps.google.com/mapfiles/ms/micons/blue.png"
               }
     CreateMarker(obj,i);
  }
  var heatmapArray = [];
  for (var i=0; i<gmarkers.length; i++) {
    heatmapArray.push({location: gmarkers[i].getPosition(), weight: gmarkers[i].llamados});
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapArray
});
heatmap.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

var infowindow = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
var marker, i;
var myLatLng;

function CreateMarker(obj, i) {
  myLatLng = new google.maps.LatLng(obj['lat'], obj['lon']);
  marker = new google.maps.Marker({
    position: myLatLng,
    animation: google.maps.Animation.DROP,
    title: obj['nodo'],
    llamados: obj['llamados'],
    icon: obj['icono'],
    map: map
  });
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent('Nodo: ' + obj['nodo'] + '; Llamados: ' + obj['llamados']);
      infowindow.open(map, marker);
    }
  })(marker, i));

  gmarkers.push(marker);
}
google.maps.event.addDomListener(window, "load", initialize);
/* Data points defined as a mixture of WeightedLocation...