Каждый API работает индивидуально, но вместе они не

Question

При использовании местоположения Google автозаполнения API с помощью этого кода непосредственно перед </body>, он работает:

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

При использовании этого кода Google Map 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

Не загружайте API Javascript Google Maps несколько раз. Загружайте его только один раз, объединяя все параметры и библиотеки в одной строке (за 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>