Created
March 18, 2017 00:30
-
-
Save VanLuda/b2b6fe9047bbf57d5092092b4efc7c98 to your computer and use it in GitHub Desktop.
Google Autocomplete Address Form for Formidable Limit by Country
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
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.
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
After delete field of the address, its is possible to blank the others fields?