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

Question

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.

Solution 1

You can include one link:

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

Basically merging the url parameters in both the links.

Solution 2

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();

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