Tukukkk

I have a webpage where I want to guide users into inputting an address by using Google Maps Autocomplete API.

I have 3 fields.
The first one is limited to suggesting only localities. configured as follows:

<input name="locality" type="text" class="form-control" id="locality" placeholder="Insert locality" required>

Then from javascript:

var input = document.getElementById('locality');

var autocomplete = new google.maps.places.Autocomplete(input, {

    types : [ '(cities)' ]

});



autocomplete.setComponentRestrictions({'country': ['us']});



// Set the data fields to return when the user selects a place.

autocomplete.setFields(['address_components', 'geometry', 'icon', 'name']);



autocomplete.addListener('place_changed', function() {

  var place = autocomplete.getPlace();

  if (!place.geometry) {

    // User entered the name of a Place that was not suggested and

    // pressed the Enter key, or the Place Details request failed.

    window.alert("Scegli tra i suggerimenti di Google o spostati nel campo successivo (Comune) per continuare con l'inserimento dei dati.");

    return;

  }



  if (place.address_components) {

    $("#locality").data('addresscomponents', place.address_components);



    var locality = "";

    if (getAddressPart(place.address_components, "locality") != undefined) {

        locality = getAddressPart(place.address_components, "locality").long_name

        if (getAddressPart(place.address_components, "locality").long_name != getAddressPart(place.address_components, "administrative_area_level_3").long_name) {

            locality += ", " + getAddressPart(place.address_components, "administrative_area_level_3").long_name

        }

    } else {

        locality = getAddressPart(place.address_components, "administrative_area_level_3").long_name

    }



    var region = getAddressPart(place.address_components, "administrative_area_level_2").short_name;

    $("#locality").val(locality || "")



    $("#inputAddressForGoogle").val($("#inputAddressForGoogle").val() + ", " + locality + ", " + region);

    $("#inputAddressForGoogle").data("locality", locality);

    $("#inputAddressForGoogle").data("region", region);



    $("#inputRegion").val(getAddressPart(place.address_components, "administrative_area_level_2").long_name)

  }

});



var getAddressPart = (addressComponents, type) => {

    return addressComponents.find(el => {

        return el.types.indexOf(type) >= 0

    })

}

The second #inputRegion field of the three, used above, is only used to obtain and show to the user the region of the selected locality:

<input name="inputRegion" type="text" class="form-control" id="inputReagion" placeholder="Region" required>

The third input also used in the javascript code above, actually never gets focused

<input name="inputAddress" type="text" class="form-control" id="inputAddress" placeholder="" required

    style="z-index: 99;background: transparent;">

<input name="inputAddressForGoogle" type="text" class="form-control" id="inputAddressForGoogle" placeholder="" required

    style="color: #aaa;position: absolute;margin-top: -34px;z-index: -98;border: none;box-shadow: none;">

There's one input where the user is going to type, and one input underneath that is going to query Google's Autocomplete services with the value: User inserted address + locality + region.

JavaScript:

var input = document.getElementById('inputAddressForGoogle');

var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.setFields(['address_components', 'geometry', 'icon', 'name']);

autocomplete.setTypes(['address']);



autocomplete.addListener('place_changed', function() {

  var place = autocomplete.getPlace();    

  if (place.address_components) {

    $("#inputAddress").data('addresscomponents', place.address_components);



    var street = getAddressPart(place.address_components, "route") ? getAddressPart(place.address_components, "route").short_name : ''

    var streetNumber = getAddressPart(place.address_components, "street_number") ?

        ", " + getAddressPart(place.address_components, "street_number").short_name : ''



    $("#inputAddress").val(street + streetNumber)

  }

});

Now, while the user has in focus the third input, I want them to be able to move and select the Autocomplete's suggestions that are related to the input field underneath.

It was enough to propagate all the keys to the underlying field.

$("#inputAddress").on('keyup', (e) => {

    google.maps.event.trigger( document.getElementById("inputAddressForGoogle"), 'focus', {} );

    try {

        google.maps.event.trigger(document.getElementById("inputAddressForGoogle"), 'keydown', {keyCode: e.keyCode});

    } catch (e) {

    }

});