Problems with JS Autocomplete. Doesnt trigger

Question

I have the following JSP

<!-- Map section -->

<div class="row">
    <div class="col-md-9 col-sm-9 col-xs-9">
        <div id="map" style="width: 100%; height: 500px"></div>
    </div>
</div>

<!-- Modal with form. Inside this modal form i have this input -->


<input class="form-control" name="pickupLocation" id="txtPickUpLocation" type="text" required>


<!-- Script Section inside JSP file -->

<script>
var autocomplete;
function initializate(){
    geocoder = new google.maps.Geocoder();


    //TEMPORARY SOLUTION: Set Manually coordinates (Guayaquil)

    setCoordinates(-2.159530, -79.894745);
    test();
}
function test(){

    var inputPlace = document.getElementById('txtPickUpLocation');
    autocomplete = new google.maps.places.Autocomplete(inputPlace);

    google.maps.event.addListener(autocomplete, 'place_changed',
    function() {
        var place = autocomplete.getPlace();

        console.log('Coordenadas obtenidas');
        var lat = place.geometry.location.lat();
        var lng = place.geometry.location.lng();

    });
}

function setCoordinates(lat, lng) {
        //Save the TMP coordinates to later, obtain ubication in string form.
        latitude = lat;
        longitude = lng;

        obtainUserPlaceLocation(latitude, longitude, function(result) {
            //After obtain the actual position of the user (Browser?), now we can create the map.
            initMap();
            //Then, search the taxi locations to show it
            obtainTaxisLocations();
        });
    }
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=API_VALID_KEY&libraries=places&callback=initializate"></script>

I have the following script. With the function setCoordinates I get my coordinate and I create the map with that position and with testfunction, set the listener when the user types to get the location. The map is shown, but when I show the modal and write in the input the autocomplete is not executed. I have worked with autocomplete before but I have never had problems. The truth is I do not know what the problem could be, and it's driving me crazy. Any help would be welcome, thank you very much

EDIT: I add setCoordinates function. In this functions I call to obtainUserPlaceLocation to obtain the location (String format) with the lat, lng parameters, when this is finished I create the map and search taxis (web services using the string location obtained from lat,lng) to put on the map. Everything works, except autocomplete places input.

Does `setCoordinates` do anything asynchronous? Is the input available when you get it or maybe reset between the time you get it and when you type into it? `var inputPlace =...;console.log(inputPlace);` — HMR, Mar 23 '18 at 04:21
If `txtPickUpLocation` is created by `initMap` then it won't exist when test is called. If it does then maybe creating the autocomplete before map initialization causes problems. You could try moving the call to test to the line after initMap. if that doesn't work then maybe not call `obtainTaxisLocations` as that may be changing the map in a way that breaks the autocomplete. — HMR, Mar 23 '18 at 04:46
`txtPickUpLocation ` is part of a form in a modal, which is hidden in the same JSP of the map. If I click on a button, this modal appears. The solutions you suggested to me, I tried but it did not work :( — Oscar Moncayo, Mar 23 '18 at 05:00

Omar · Answer 1 · 2018-03-26T19:48:27.027

Right off the bat, I can see that you are not loading the Google Maps' <script> tag properly. Hence, you are getting an error when Google is trying to manipulate your DOM... See T.J Crowder's answer here as to why to it is important to load your Google Maps script with <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

You pretty much did not allow for the proper rendering to execute in order for you to successfully execute your script(s).

Hope this helps!

Problems with JS Autocomplete. Doesnt trigger

1 Answers1