html - 谷歌地图 JavaScript 错误

Question

我正在尝试通过 JavaScript 在我的网站上安装 Google map ，该网站将有多个标记。我遇到了几个错误，我无法弄清楚或解决它们。有人可以帮助我吗？

map :

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

我正在页脚( map Canvas 下方)加载以下 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 is not defined at map.js:522.未捕获的Qb

这是什么意思？

Answer 1

您应该在 Google map URL 的 callback 查询参数中传递 map 初始化函数的名称(initialize):

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

您还需要在加载 google maps 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>