Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Google Maps AutoComplete for Profile Location Field
<div class="control-group">
<label class="control-label">Location</label>
<div class="controls">
<input name="location" type="text" placeholder="City, State, Country" value="">
<input name="location_city" type="hidden" value="">
<input name="location_state" type="hidden" value="">
<input name="location_country" type="hidden" value="">
<input name="location_lat" type="hidden">
<input name="location_lng" type="hidden">
</div>
</div>
function findComponent(result, type) {
var component = _.find(result.address_components, function(component) {
return _.include(component.types, type);
});
return component && component.short_name;
}
var autocomplete = new google.maps.places.Autocomplete(self.$('#coursera-profile-editor-location')[0], {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
$('input[name="location_lat"]').val(place.geometry.location.lat());
$('input[name="location_lng"]').val(place.geometry.location.lng());
$('input[name="location_country"]').val(findComponent(place, 'country'));
$('input[name="location_state"]').val(findComponent(place, 'administrative_area_level_1'));
$('input[name="location_city"]').val(findComponent(place, 'administrative_area_level_3') || findComponent(place, 'locality'));
});

You are missing the JS initial include.

whisnet commented Apr 14, 2016

how do i build system search with google map autocomplete ?
because data user input not exactly. with data store in db

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