"You have included the Google Maps API multiple times on this page" Error

user_5873434 0
Viewed 75104

I have the following in my html page:

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false">
    </script>
    <script 
        async defer
        src="https://maps.googleapis.com/maps/api/js?key=hUnDAdjYG_Wz7u2qL6unHqfBOmvaZ0H1Mg&callback=initMap">
    </script>

First link is for Google's API Geometry Library , and the second initialises and draws the map.

I'm getting the error "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."

I know that this can be fixed by calling just one script, and changing the parameters, see Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." I don't know how to replicate the answer for my problem though.

google-maps-api-3 google-maps html javascript
2 Answers

Had the same problem that disturbed me for long time. My case was to combine initMap to load map and Google Places API to list autocomplete to the input search.

Here is my solution to this.

  1. The function for autocomplete I've put inside the initMap()
function activatePlacesSearch() {

var input = document.getElementById('inputValue');
    var autocomplete = new google.maps.places.Autocomplete(input);
}
activatePlacesSearch();
  1. in index.html:
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>

So best solution is to:

a) combine two scripts into one

b) place sensro functionality insite the initMap if possible.

user_143930680
Related