I am trying to include two different Google APIs on the same page, but I am getting an error of
You have included the Google Maps API multiple times on this page.
Specifically, I am trying to use the autocomplete and distance matrix API from Google. I can only get one or the other working on any single page, because I cannot call maps.googleapis.com
twice. However, I must call different extensions of the link (i.e. callback=initAutocomplete
and callback=initMap
), so I am not sure how to get around this. The two links are below:
<script src="https://maps.googleapis.com/maps/api/js?key=MyPrivateKey=&libraries=places&callback=initAutocomplete" async defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MyPrivateKey4&callback=initMap" async defer></script>
Does anyone know how to access the autocomplete and Map API with a single script call?
Generally, callback
function is called when the Google Maps (with all libraries loaded if requested) are completely loaded and can be used. Thus, you can put initAutoComplete
in initMap
like
<script>
var map;
function initMap(){
// initiate a new map instance.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 15.3647, lng: 75.1240}
});
initAutocomplete(); // initiate Auto complete instance
}
function initAutocomplete(){
// code to handle autocomplete
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<key>&libraries=places&callback=initMap" async defer></script>