Autocomplete Address Form using Google GeoLocation

[marceloafranca]

I was wondering if anyone in here already have done or at least tried to integrate an ADDRESS FIELD with Google GeoLocation? All I need to accomplish is visitors to not type their addresses instead Google finds the address with all the correct info so no mistyping can occur.

Thanks

[support]

Hi,

I’ve never tried it but I’ll have a quick look today to see what I can get.

Regards,

Félix

[support]

Hi,

I successfully did it by following Google Maps Javascript API. You can find information here and an example here.

I modified the code to keep only the input field, no map, and it looks like this for me. I just added this to a block of html in the form :


<script>
function initMap() {

var input = document.getElementsByClassName('iphorm_11_6 iphorm-element-text')[0];

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

var infowindow = new google.maps.InfoWindow();

autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();

var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}

infowindow.setContent('<div>' + place.name + '<br>' + address);
infowindow.open();
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&libraries=places&callback=initMap"
async defer></script>


Two things to keep in mind :
1) You need to select the right field with your selector (keep in mind that document.getElementsByClassName will give you an array)
2) You need to generate your own Google Maps API Key

Let me know if you have any problem,
Regards,

Félix

[marceloafranca]

It worked perfectly! Thanks.

Attachments:

You must be logged in to view attached files.

[movisart]

This will work with the V2.0 ?

[Author]

Posts