Google Maps API v3热图错误:"无法读取属性' HeatmapLayer'未定义"

时间:2014-06-25 16:48:43

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

我正在尝试将Heatmaps图层加载到我的谷歌地图上,但出于某种原因,我只是不断收到错误“无法读取未定义的属性'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/

2 个答案:

答案 0 :(得分:26)

在加载Google地图js时,将可视化库添加到网址

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

答案 1 :(得分:0)

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