google maps - Each API works individually, but together they don't -

when using location google autocompletion api code before </body>, works:

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

when using google map api code before </body>, works :

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

but when using both of them, 1 after another, autocompletion code doesn't work anymore. why?

don't load google maps javascript api multiple times. load once, combining parameters , libraries in single line (per the documentation). if loading asynchronously (with callback), code depends on api must in callback function, doesn't execute until api has loaded (which when callback function runs).

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

code snippet:

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>