Two different Google APIs on same page, but get You have included the Google Maps API multiple times on this page Error

Question

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?

Answer 1

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>