Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save VanLuda/b2b6fe9047bbf57d5092092b4efc7c98 to your computer and use it in GitHub Desktop.
Save VanLuda/b2b6fe9047bbf57d5092092b4efc7c98 to your computer and use it in GitHub Desktop.
Google Autocomplete Address Form for Formidable Limit by Country
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('field_autocomplete')),
{
types: ['geocode'],
componentRestrictions: {country: 'au'}//Country Abbreviation
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById('field_' + addressType).value = val;
}
}
}
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>
@rubensfast
Copy link

After delete field of the address, its is possible to blank the others fields?

@nickbh99
Copy link

Note: If using as UK only you will need to include an additional field - ie postal_town: 'long_name', around ;line 18 and create the same field in your formidable form. This is because in in the UK and Sweden the correct component to display the city is postal_town. Hope that helps anyone restricting to UK.

@umaisbinsajjad
Copy link

Zip code is not populating in 'us' restricted address with script above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment