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/

Solution 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>

Solution 2

According to Google's documentation the Visualization classes are a self-contained library, separate from the main Maps JavaScript API code. You must first load it before using the libraries parameter.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

<script>
        function initMap() {
            /* Data points defined as an array of LatLng objects */
            var heatmapData = [
                new google.maps.LatLng(37.782, -122.447),
                new google.maps.LatLng(37.782, -122.445),
                new google.maps.LatLng(37.782, -122.443),
                new google.maps.LatLng(37.782, -122.441),
                new google.maps.LatLng(37.782, -122.439),
                new google.maps.LatLng(37.782, -122.437),
                new google.maps.LatLng(37.782, -122.435),
                new google.maps.LatLng(37.785, -122.447),
                new google.maps.LatLng(37.785, -122.445),
                new google.maps.LatLng(37.785, -122.443),
                new google.maps.LatLng(37.785, -122.441),
                new google.maps.LatLng(37.785, -122.439),
                new google.maps.LatLng(37.785, -122.437),
                new google.maps.LatLng(37.785, -122.435)
            ];

            var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

            map = new google.maps.Map(document.getElementById('map'), {
                center: sanFrancisco,
                zoom: 13,
                mapTypeId: 'satellite'
            });

            var heatmap = new google.maps.visualization.HeatmapLayer({
                data: heatmapData
            });
            heatmap.setMap(map);
        }
    </script>

<div id="#mapContent">
    <div id="map" style="width: auto; height: 550px; position: relative; overflow: hidden;"></div>
</div>

Comments

[Sebastian Breit]

OK makes sense... however it's incredible that there is no reference of this at google maps api specs (Or at least I haven't found it)

[ErwanLent]

@Perroloco I know right! I don't even remember how I found it, they should really do a better job of making it obvious in their docs.

[Louys Patrice Bessette]

Documentation has not been updated about this, as of 2017.

[Louys Patrice Bessette]

This now should be : <script async defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_K‌​EY]&libraries=visual‌​ization&callback=ini‌​tMap">

[ErwanLent]

@LouysPatriceBessette thank you, updated to include async defer