Google Maps API v3 Heatmaps Error: "Cannot read property 'HeatmapLayer' of undefined"

Question

I am trying to load a Heatmaps layer onto my google maps, but for some reason I just keep getting the error "Cannot read property 'HeatmapLayer' of undefined."

map = new google.maps.Map(document.getElementById("gmaps"),{
    zoom: 11,
    center: new google.maps.LatLng(39.788403, -86.19990800000001),
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: false
});

heatMapData = [
new google.maps.LatLng(39.77745056152344, -86.10900878906250),
new google.maps.LatLng(39.82060623168945, -86.17008972167969),
new google.maps.LatLng(39.77947616577148, -86.17008972167969),
new google.maps.LatLng(39.82987594604492, -86.13955688476562),
new google.maps.LatLng(39.74195098876953, -86.12429046630860)
];
heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatMapData,
    map: map
});

Here is the jsFiddle: http://jsfiddle.net/9HQ2a/3/

Answer 1

Add the visualization library to the URL when loading the google maps js.

<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script>