Question

我正在尝试通过JavaScript将Google地图安装到我的网站上，这将有多个标记。我收到了几个错误，我无法弄明白或解决它们。请有人帮帮我吗？

地图：

<div id="map-canvas"></div>

我在页脚（地图画布下方）中加载以下JavaScript：

<!-- Google Map -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initMap" type="text/javascript"></script>
<script type="text/javascript" src="js/map.js"></script>

在我的map.js中我有：

// necessary variables
var map;
var infoWindow;

// markersdata variable stores the information necessary to each marker
var markersData = [{
        lat: 40.6386333,
        lng: -8.745,
        name: "Camping Praia da Barra",
        address1: "Rua Diogo Cão, 125",
        address2: "Praia da Barra",
        postalCode: "3830-772 Gafanha da Nazaré"
    },
    {
        lat: 40.59955,
        lng: -8.7498167,
        name: "Camping Costa Nova",
        address1: "Quinta dos Patos, n.º 2",
        address2: "Praia da Costa Nova",
        postalCode: "3830-453 Gafanha da Encarnação"
    },
    {
        lat: 40.6247167,
        lng: -8.7129167,
        name: "Camping Gafanha da Nazaré",
        address1: "Rua dos Balneários do Complexo Desportivo",
        address2: "Gafanha da Nazaré",
        postalCode: "3830-225 Gafanha da Nazaré"
    }
];

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(40.601203, -8.668173),
        zoom: 9,
        mapTypeId: 'roadmap',
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // a new info window is created
    infoWindow = new google.maps.InfoWindow();

    // event that closes the info window with a click on the map
    google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
    });

    // finally displaymarkers() function is called to begin the markers creation
    displayMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

// this function will iterate over markersdata array
// creating markers with createmarker function
function displayMarkers() {

    // this variable sets the map bounds according to markers position
    var bounds = new google.maps.LatLngBounds();

    // for loop traverses markersdata array calling createmarker function for each marker 
    for (var i = 0; i < markersData.length; i++) {

        var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
        var name = markersData[i].name;
        var address1 = markersData[i].address1;
        var address2 = markersData[i].address2;
        var postalCode = markersData[i].postalCode;

        createMarker(latlng, name, address1, address2, postalCode);

        // marker position is added to bounds variable
        bounds.extend(latlng);
    }

    // finally the bounds variable is used to set the map bounds
    // with fitbounds() function
    map.fitBounds(bounds);
}

// this function creates each marker and it sets their info window content
function createMarker(latlng, name, address1, address2, postalCode) {
    var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: name
    });

    // this event expects a click on a marker
    // when this event is fired the info window content is created
    // and the info window is opened.
    google.maps.event.addListener(marker, 'click', function() {

        // creating the content to be inserted in the infowindow
        var iwContent = '<div id="iw_container">' +
            '<div class="iw_title">' + name + '</div>' +
            '<div class="iw_content">' + address1 + '<br />' +
            address2 + '<br />' +
            postalCode + '</div></div>';

        // including content to the info window.
        infoWindow.setContent(iwContent);

        // opening the info window in the current map and at the current marker location.
        infoWindow.open(map, marker);
    });
}

我得到的错误是： 1.未捕获的ReferenceError：google未在map.js：52中定义 2.未经训练的Qb

这是什么意思？

Answer 1

您应该在Google地图网址的callback查询参数中传递地图初始化函数的名称（<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initialize" type="text/javascript"></script>）：

<script type="text/javascript" src="js/map.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initialize" type="text/javascript"></script>

您还需要在加载google maps API之前加载您的javascript文件，以确保在调用回调时定义您的初始化函数：

$fillable

Answer 2

您正在加载Google API异步。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initMap" type="text/javascript"></script>

这意味着你的map.js在加载之前就已经被执行了，另外：回调是“initMap”＆＃39;在这个时刻，你自己的map.js中没有做任何事情。

google.maps.event.addDomListener(window, 'load', initialize);

删除此行，并将脚本中的回调函数更改为initialize。

Answer 3

这一行google.maps.event.addDomListener(window, 'load', initialize);

应该在你的initialize函数cos中，就像你的错误所说的那样，它还没有加载

Answer 4

好的，让我们来看看这里发生了什么。您已使用以下方法导入了g贴图依赖项：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API REMOVED&callback=initMap" type="text/javascript"></script>

看看那个“异步”字样。这表示js文件将异步加载。现在，看看src attr：

https://maps.googleapis.com/maps/api/js?key=API_REMOVED&callback=initMap

查询字符串中的属性回调定义了代码中需要的JS函数，该函数将在异步加载完成时执行。您的代码中没有此功能，因此您应该使用地图的初始化来创建它。

也许，将所有JS代码放入其中将起作用：

function initMap(){
   // your code here
}

谷歌地图JavaScript错误

4 个答案: