Extract data from google autocomplete
The script populates the fields of an HTML form with the data that comes back from google autocomplete.
The HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourApiKey&libraries=places"></script>
<form>
<div class="form-group input-group">
<label>Start typing the address</label>
<input type="text" class="form-control" id="formControl" name="full_address" value="" placeholder="Location" autocomplete="off">
<input type="hidden" id="locality" name="city" value="">
<input type="hidden" id="route" name="street" value="">
<input type="hidden" id="street_number" name="data[street_number]" value="">
<input type="hidden" id="lat" name="data[lat]" value="">
<input type="hidden" id="lng" name="data[lng]" value="">
</div>
</form>
The JavaScript
<script>
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('formControl')),
{
types: ['geocode'],
componentRestrictions: { 'country': 'il' }
}
);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
// get the data from google
var place = autocomplete.getPlace();
var components={};
jQuery.each(place.address_components, function(k,v1) {jQuery.each(v1.types, function(k2, v2){components[v2]=v1.long_name});});
// populate the fields
var list = ['locality', 'route', 'street_number'];
list.forEach(function(fieldName){
var fieldVal = typeof components[fieldName] !== 'undefined'? components[fieldName] : '';
jQuery('#'+fieldName).val(fieldVal);
});
jQuery("#lat").val(place.geometry.location.lat());
jQuery("#lng").val(place.geometry.location.lng());
// populate the fields
// pretty address for the user
var fullAddressStr = '';
if(typeof components.locality !== 'undefined' && typeof components.route !== 'undefined' && typeof components.street_number !== 'undefined'){
fullAddressStr = 'street ' + components.route + ' ' + components.street_number + ', ' + components.locality;
} else if(typeof components.locality !== 'undefined' && typeof components.route !== 'undefined'){
fullAddressStr = 'street ' + components.route + ', ' + components.locality;
} else if(typeof components.locality !== 'undefined'){
fullAddressStr = components.locality;
}
jQuery('#formControl').val(fullAddressStr);
});
</script>