Google Maps Heatmap Layer Only Displays in Some Browsers

I have a rather baffling problem with a Google Maps heatmap layer: it displays fine in Firefox, but refuses to do so in Chrome or Safari.

A demonstration: http://dev.nomad.cm/projects/maps/map.html

Neither Chrome nor Safari throws any errors in the console, so I don’t really have anything concrete to go on. I suspect possible memory limits: the JSON of lat/long points I’m loading is ~150,000 items. Still, if this was the issue, I’d think an error would be thrown up.

Very simple code (including skeleton HTML):

<html>
<head>
<title>Heatmap Test</title>
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script type="text/javascript">

    $.ajaxPrefilter( "json script", function( options ) {
      options.crossDomain = true;
    });

    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        var layoffLocs = new Array();
        $.getJSON('map_points.json', function(data) { 
            $.each(data.points, function(i, value) {
                layoffLocs.push(new google.maps.LatLng(value.lat, value.lon));
            });
        });
        var pointArray = new google.maps.MVCArray(layoffLocs);
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });
        heatmap.setMap(map);
        // google.maps.event.addDomListener(window, 'load', initialize);
    }

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>

Sample excerpt from JSON:

{
"points":[
    {"lat":40.025312,"lon":-83.091194},
    {"lat":40.754308,"lon":-84.081579},
    {"lat":40.141624,"lon":-82.978615},
    {"lat":39.416894,"lon":-81.429982},
    {"lat":39.450391,"lon":-84.476614}
]
}

Any insights greatly appreciated. Thanks!

Answer

Looks to me like you’re trying to render the heatmap before the data has loaded. Shouldn’t you be doing it in the callback function of the json load, something like:

 $.getJSON('map_points.json', function(data) { 
        $.each(data.points, function(i, value) {
            layoffLocs.push(new google.maps.LatLng(value.lat, value.lon));
        });

        var pointArray = new google.maps.MVCArray(layoffLocs);
        var heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });
        heatmap.setMap(map);
});

Leave a Reply

Your email address will not be published. Required fields are marked *