JSFiddle - React, Tailwind, and code Playground

by sashakuznetsov

HTML

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

CSS

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

JavaScript

var map;
var heatmap;

function initMap() {
  var infowindow = new google.maps.InfoWindow();
  var mapDiv = document.getElementById('map');
  map = new google.maps.Map(mapDiv, {
    center: {
      lat: 39.2888414,
      lng: -76.6099112
    },
    zoom: 12
  });
  google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    if (zoom > 12) {
      // hide the heatmap, show the markers
      heatmap.setMap(null);
      map.data.setMap(map);
    } else {
      // hide the markers, show the heatmap
      heatmap.setMap(map);
      map.data.setMap(null);
    }
  })

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  // map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING');
  map.data.addGeoJson(geoJsonShooting);
  // map.data.loadGeoJson('https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=HOMICIDE');

  var data;
  /*   $.ajax({
        dataType: "json",
        url: "https://data.baltimorecity.gov/resource/4ih5-d5d5.geojson?description=SHOOTING",
        data: data,
        success: letsGo
      });
  */
  var JSONLoaded;

  var latLngList = [];
  var heatMapData = [];

  function letsGo(mapData) {
    // console.log(mapData.features.length);

    for (i = 0; i < mapData.features.length; i++) {
      tempLocation = mapData.features[i]
      latLngList.push(tempLocation.geometry.coordinates);
      //console.log(latLngList);
    }

    // console.log(latLngList);
    // console.log(latLngList.length);
    for (i = 0; i < latLngList.length; i++) {
      var tempLat = latLngList[i][1];
      var tempLong = latLngList[i][0];
      var tempVar = new google.maps.LatLng(tempLat, tempLong);
      heatMapData.push(new google.maps.LatLng(tempLat, tempLong));
      //  console.log(tempLat);
      //  console.log(tempLong);
    }

    var pointArray = new google.maps.MVCArray(heatMapData);

    //  console.log(pointArray);

    heatmap...