不使用回調方法加載谷歌地圖

Question

我的網站上有多個谷歌地圖實例，現在同一頁面上有兩個不同的谷歌地圖，第一個有效，另一個無效，現在我知道邏輯問題讓我先向您展示我的代碼

<script>
    function initMap() {
        var myLatLng = {lat: 43.6222102, lng:-79.6694881};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=my_key&callback=initMap"
        async defer></script>

現在，當我定義一個回調方法時，它總是初始化名為initMap的方法，而我想要做的是可以有多個谷歌地圖讓我們假設initMap2如何在沒有回調方法的情況下加載它們？

Answer 1

要在沒有回調的情況下加載地圖，請同步/內聯加載 API（不帶async defer ），然后在加載事件上調用 initMap 函數。

（注意：僅供參考：Google 將所有示例更改為使用異步加載來縮短加載時間）

（注 2： Google 已在其描述同步加載的文檔中添加了“示例” ）

概念證明小提琴

代碼片段：

 function initMap() { var myLatLng = { lat: 43.6222102, lng: -79.6694881 }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map, }); } google.maps.event.addDomListener(window, 'load', initMap);

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>