Google Autocomplete not working, conflicting with Google Maps

Question

I have the following script for Google Autocomplete: The first function loads Google Autocomplete, the second selects lat and long values after a location is selected from drop-down list.

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

    <script type="text/javascript">
    function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('Place').value = place.name;
            document.getElementById('Lat').value = place.geometry.location.lat();
            document.getElementById('Lng').value = place.geometry.location.lng();
            //alert("This function is working!");
            //alert(place.name);
           // alert(place.address_components[0].long_name);

        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

When I simply use this with a form with an input that has id="searchTextField" everything loads fine and I can select the location from a drop-down list.

However, on the same page, I load Google Maps with markers to display search results close to the user input location. I load the following Google Maps API script:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>

Now, if I load this script first (depending on the order in my .html file), I will either get a map with no markers and working autocomplete, or a correct map displayed with markers and no autocomplete.

I figured that this could be because it's the same script, but if I only load the first script, I get a blank map (no map at all, just white space)

EDIT JS CONSOLE LOG:

I get:

InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama js605 ;

ReferenceError: Can't find variable: locationData ; [Error] You have included the Google Maps

API multiple times on this page. This may cause unexpected errors.

Answer 1

You should only load the Google API once. You can combine multiple libraries at the same time.

If you want Google maps and the places APIs you can request them via

<script src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&libraries=places"></script>

Just place this on top of your HTML file if you don't need to download it asynchronously with an additional callback.

This will fetch both core and the places APIs. More information can be found here.
https://developers.google.com/maps/documentation/javascript/libraries

Answer 2

you are not able to send more than one call back in one request for google APIs. so :

first define your map and auto search :

<script>
    function myPlaceSearch(){
     ....
    }
    function initMap() {
    ....
    }
</script> 

then call them in single function:

<script>
    function initialize() {
       myPlaceSearch();
       initMap();
    }
</script>

and THEN request them in single callback:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=[API KEY]&libraries=places&callback=initialize"></script>