Heatmaps

HTML

<div id="map"></div>
    <script>

			var map, heatmap;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: {lat: 37.775, lng: -122.434},
        });

        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          map: map
        });
      }

      // Heatmap data: 500 Points
      function getPoints() {
      	
        var lotsOfMarkers = [];
        
        for( var i = 1; i <= 10000; i++) {
        	
           var random = new google.maps.LatLng( (Math.random()*(85*2)-85), (Math.random()*(180*2)-180) );
        
        	lotsOfMarkers.push(random);
        }
      
        return lotsOfMarkers;
      }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?&libraries=visualization&callback=initMap">
    </script>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }