Skip to content

Instantly share code, notes, and snippets.

@pamelafox
Created August 21, 2012 14:30
Show Gist options
  • Save pamelafox/3416028 to your computer and use it in GitHub Desktop.
Save pamelafox/3416028 to your computer and use it in GitHub Desktop.
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'));
});
@avdata99
Copy link

You are missing the JS initial include.

Copy link

ghost 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