Skip to content

Instantly share code, notes, and snippets.

@oritromax
Last active December 12, 2019 23:52
Show Gist options
  • Save oritromax/82e5da1a2d1ae8ad32c7e3308b1fd9d5 to your computer and use it in GitHub Desktop.
Save oritromax/82e5da1a2d1ae8ad32c7e3308b1fd9d5 to your computer and use it in GitHub Desktop.
After my hurdle with Google Map JS API, Writing this to help any lost soul. This only serves the purpose of filling a Standard address field ! Make sure you have Places API and Map JS API Enabled in your Google Console !
// Make sure to load this after the HTML is loaded. Also, don't forget to include the API with '&libraries=places' for this to work
$(window).on('load',function () {
// The field where people will search their address, Must be a text input
var searchinput = 'street_number';
// Don't need Place Search For this Example
var autocomplete;
// Could've done the following line a bit easier !
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchinput)),{
types: ['geocode']
});
// When the input element's state changes, this listener will pick it up and execute the callback function fillInAddress
autocomplete.addListener('place_changed', fillInAddress);
function fillInAddress() {
// Placing this on a variable, to make life easier
var place = autocomplete.getPlace();
// Log it to see what comes back on a search, easier then reading the whole docs on this
console.log(place);
// We just need the 'address_components' array, thats where all the good stuff are
// again, putting this on a variable
var data = place.address_components;
// The whole reason of doing this is, the API sends back data on multiple level on a multidimentional array.
// Its fine just to use the array and figure out the data. But in case of Sweden and japan some data key's are different.
// And you really don't need all of them. I picked and choose the one i needed. Which is pretty much a standard HTML
// Address from you are gonna use in a Webpage !
var state = data.find(data => data.types[0] == "administrative_area_level_1");
var city = data.find(data => data.types[0] == "locality");
var zip = data.find(data => data.types[0] == "postal_code");
var street = data.find(data => data.types[0] == "street_number");
var route = data.find(data => data.types[0] == "route");
// Now i just used jQuery to set the values on those fields.
$('#maphelper_state select').val(state.short_name); // State
$('#locality').val(city.long_name); // City
$('#postal_code').val(zip.long_name); // Zip / Postal Code
$('#street_number').val(street.long_name + ' ' + route.long_name); // Main Address = Street no and road defination combined
}
});
// That's basically it.
// Without Comment: https://gist.github.com/oritromax/6e13ecf66497427da3764aa3ddb46312
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment