Trigger google maps autocomplete on focus out

Question

How to reproduce the issue:

on this page https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

choose some address, for example 20 Water Street, New York City, NY, United States, (as expected the fields are being filled with the info). Now, e.g. in address change 20 to 10, and instead of choosing the address from the suggested list, just click somewhere on the page. The suggested list disappears, the new address 10 Water Street, New York City, NY, United States remains in the input field, but the fields information is not being updated.

I am using this to get the latitude and longitude. So, if the user instead of clicking on the address, clicks outside, it will look like, that he changed the address, but in fact I still will have the previous address's Lat and Lng.

here is the init function

var autocomplete;
function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    /** @type {HTMLInputElement} */
    (document.getElementById('addressAutocomplete')), {
        types : [ 'geocode' ]
    });

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

I was thinking smth like this can work, but it does not, this line console.log(place); outputs undefined

$(document).ready(function() {
    $(document).on('focusout', '#addressAutocomplete', function() {
        google.maps.event.trigger(autocomplete, 'place_changed', {});
    });
});

Thanks

So you want to auto-select the first suggestion when the input-field loses the focus? — Dr.Molle, May 12 '14 at 08:41
@Dr.Molle As far as I tried, it looks like yes, but I'm not sure if this will work in all cases. Thanks — dav, May 12 '14 at 13:29
getting response from `var place = autocomplete.getPlace();` check this http://jsfiddle.net/BBzk6/ .. — Wit Wikky, May 13 '14 at 08:55
Check this : http://stackoverflow.com/questions/24452066/google-maps-auto-search-on-page-load — Alexandre Bourlier, May 12 '15 at 13:46

score 7 · Answer 1 · answered Mar 02 '17 at 12:34

I had a similar issue (that anything in the given field should be valid Google Maps address), and based on Alexandre Boulier's suggested link built a solution inspired from this one, that may help you. The idea is :

when the user does something else than click on a Google Maps suggestion
trigger the event to move focus on the first suggestion
trigger the event to select it

I copy the result for my own code (with Jquery) :

//// Ensuring that only Google Maps adresses are inputted
function selectFirstAddress (input) {
    google.maps.event.trigger(input, 'keydown', {keyCode:40});
    google.maps.event.trigger(input, 'keydown', {keyCode:13});
}

// Select first address on focusout
$('#content').on('focusout', 'input#xxx__zzz', function() {
    selectFirstAddress(this);
});

// Select first address on enter in input
$('#content').on('keydown', 'input#xxx__zzz', function(e) {
    if (e.keyCode == 13) {
        selectFirstAddress(this);
    }
});

For me it works, I hope it helps !

Trigger google maps autocomplete on focus out

1 Answers1