每個API單獨工作，但合起來不

Question

當剛剛</body>之前，使用谷歌的位置API自動完成與此代碼，它的工作原理：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 
<script> 
    var input = document.getElementById('where'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
</script> 

當使用此谷歌地圖API的代碼只是</body>之前，它的工作原理太：

<script src="https://maps.googleapis.com/maps/api/js" async defer></script> 
<script> 
function initMap() { 
    var myLatLng = {lat: 47.901773, lng: 1.905062}; 
    var map = new google.maps.Map(document.getElementById('map'), { center: myLatLng, scrollwheel: false, zoom: 12 }); 
    var marker = new google.maps.Marker({map: map, position: myLatLng, title: 'Hello World!'}); 
} 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 

但用他們兩人，一個又一個的時候，自動完成代碼不工作了。爲什麼？

Answer 1

請勿多次加載Google Maps JavaScript API。只加載一次，結合單行中的所有參數和庫（根據the documentation）。如果使用異步方式加載（使用回調），則所有依賴於API的代碼都必須位於回調函數中，因此只有在API完全加載（即回調函數運行時）後纔會執行。

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script> 

代碼片段：

function initMap() { 
 
    var myLatLng = { 
 
    lat: 47.901773, 
 
    lng: 1.905062 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: myLatLng, 
 
    scrollwheel: false, 
 
    zoom: 12 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: myLatLng, 
 
    title: 'Hello World!' 
 
    }); 
 
    var input = document.getElementById('where'); 
 
    var autocomplete = new google.maps.places.Autocomplete(input); 
 
}

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

<input id="where" /> 
 
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>