谷歌地图 JavaScript 错误

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. Uncaught ReferenceError: google is not defined at map.js:52 2.未捕获的Qb

这是什么意思？

Answer 1

您应该在 google maps URL 的 callback 查询参数中传递地图初始化函数的名称 (initialize)：

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

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

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

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”，此时您自己的 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 属性：

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

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

也许，把你所有的 JS 代码都放进去就行了：

function initMap(){
   // your code here
}