CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Zachary Lassiter
Zachary Lassiter

Reputation: 39

Google Maps Javascript API v3 Heatmap Not Displaying

For some reason the Map wont display.... can't really figure out why.

Below is the code, for some reason the map is just not displaying... This is my first time doing heatmaps with the Google Maps API v3 API so I'm a bit lost.

<!DOCTYPE html>
<html style="height: 100%">
  <head>
<meta charset="utf-8">
<title>Heatmap</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<style type="text/css">
 html { height: 100% }
 body { height: 100%; margin: 0px; padding: 0px }
 #map { height: 200px; width: 100% }
   </style>  
</head>
<body onload="initialize()" style="height: 100%;>
<div id="map" style="height: 600px; width: 800px;"></div>
<script>
    var map, pointarray, heatmap;
    var callsForService = [
        new google.maps.LatLng(42.2861624, -85.5813606), 
new google.maps.LatLng(42.3033738, -85.583591), 
new google.maps.LatLng(42.2453713, -85.584707), 
new google.maps.LatLng(42.3034079, -85.5973274), 
new google.maps.LatLng(42.249651, -85.595145), 
new google.maps.LatLng(42.2897601, -85.5858846), 
new google.maps.LatLng(42.321433, -85.551406), 
new google.maps.LatLng(42.2848497, -85.5906321), 
new google.maps.LatLng(42.2916942, -85.5818942), 
new google.maps.LatLng(42.3033738, -85.583591), 
new google.maps.LatLng(42.3061913, -85.5962831), 
new google.maps.LatLng(42.321433, -85.551406), 
new google.maps.LatLng(42.2917069, -85.5872286), 
    ];
    function initialize() {
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(42.2800153,-85.5828371),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById('map'),
            mapOptions);

        pointArray = new google.maps.MVCArray(callsForService);

        heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });

        heatmap.setMap(map);
  }
</script>
</body>
</html>`

Upvotes: 1

Views: 1755

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117324

There is a missing double-quote:

<body onload="initialize()" style="height: 100%;">
------------------------------------------------^

Also remove the trailing comma in callsForService

Upvotes: 1

Related Questions