加载谷歌地图而不使用回调方法 [英] load google map without using callback method

问题描述

我的网站上有多个Google Maps实例，现在在同一页面上有两个不同的Google Maps，发生的事情是第一个可行，而另一个我现在不知道逻辑问题，让我先向您展示我的代码

<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 的方法，而我想做的是可以有多个Google地图，让我们假设 initMap2 加载它们而没有回调方法?

解决方案

要在没有回调的情况下加载地图，请同步/内联加载API(不带async defer)，然后在加载事件上调用initMap函数. /p>

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

( Note2 :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> 

i have multiple google map instances on my website,now there are two different google map on a same page, what happens is the first one works and other doesn't now i know the logical issue let me show you my code first

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

now as i defined a callback method it always initializes the method named initMap whereas what i want to do is there can be multiple google maps lets suppose initMap2 how can i load them without callback method?

解决方案

To load the map without a callback, load the API synchronously/inline (without the async defer), then call your initMap function on the load event.

(Note: FYI: Google changed all their examples to using asynchronous loading to improve the load times)

(Note2: Google has added a "sample" to their documentation describing synchronous loading)

proof of concept fiddle

code snippet:

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>

这篇关于加载谷歌地图而不使用回调方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！