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

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

要在没有回调的情况下加载 map ，请同步/内联加载 API(不使用 async defer)，然后在加载事件上调用您的 initMap 函数。

(注意:仅供引用:Google 将所有示例更改为使用异步加载来缩短加载时间)

(注意 2: Google 添加了一个 "sample" to their documentation describing synchronous loading )

proof of concept fiddle

代码片段:

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>