不使用回调方法加载谷歌地图

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>