コールバックメソッドを使用せずにgoogleマップをロード

Question

私は自分のウェブサイト上に複数のGoogleマップインスタンスを持っていますが、同じページに2つの異なるGoogleマップがあります。私はあなたに最初に私のコードを表示してみましょう

私は複数のGoogleマップがあることができている私は何をしたいが、 ものと想定することができます一方、それは常にinitMapという名前のメソッドを初期化コールバックメソッドを定義されているようになりました

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

initMap2どうすればmなしコールバックメソッド？

Answer 1

コールバックなしでマップをロードするには、APIを同期/インラインでロードし（async deferなし）、loadイベントでinitMap関数を呼び出します。

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"></script> 
 
<div id="map"></div>