Google Maps API v3 热图错误：“无法读取未定义的属性 'HeatmapLayer'”答案

【问题标题】：Google Maps API v3 Heatmaps Error: "Cannot read property 'HeatmapLayer' of undefined"Google Maps API v3 热图错误：“无法读取未定义的属性 'HeatmapLayer'”
【发布时间】：2014-08-16 08:30:58
【问题描述】：

我正在尝试将热图图层加载到我的谷歌地图上，但由于某种原因，我不断收到错误消息“无法读取未定义的属性 'HeatmapLayer'。”

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
});

这里是 jsFiddle：http://jsfiddle.net/9HQ2a/3/

【问题讨论】：

加载api的时候要加上libraries=visualization。

标签： javascript jquery google-maps google-maps-api-3 heatmap

【解决方案1】：

根据Google's documentation，可视化类是一个独立的库，独立于主要的 Maps JavaScript API 代码。在使用库参数之前，您必须先加载它。

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

【讨论】：

【解决方案2】：

在加载谷歌地图js时将可视化库添加到URL。

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

【讨论】：

OK 是有道理的......但是令人难以置信的是，在 google maps api 规范中没有对此的参考（或者至少我还没有找到它）
@Perroloco 我知道是对的！我什至不记得我是如何找到它的，他们真的应该做得更好，在他们的文档中让它显而易见。
截至 2017 年，文档尚未对此进行更新。
现在应该是：<script async defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&libraries=visualization&callback=initMap">
@LouysPatriceBessette 谢谢，已更新为包含异步延迟