-
-
Save badsyntax/4330899 to your computer and use it in GitHub Desktop.
/** | |
* Author: Richard Willis - badsyntax.co | |
* Example here: http://demos.badsyntax.co/places-search-bootstrap/example.html | |
* | |
* Please note: This is not a reliable method of geocoding the address. Using the | |
* PlacesService is a much better approach. View the example above for an example | |
* of using the PlacesService to geocode the address. | |
*/ | |
var service = new google.maps.places.AutocompleteService(); | |
var geocoder = new google.maps.Geocoder(); | |
$(field).typeahead({ | |
source: function(query, process) { | |
service.getPlacePredictions({ input: query }, function(predictions, status) { | |
if (status == google.maps.places.PlacesServiceStatus.OK) { | |
process($.map(predictions, function(prediction) { | |
return prediction.description; | |
})); | |
} | |
}); | |
}, | |
updater: function (item) { | |
geocoder.geocode({ address: item }, function(results, status) { | |
if (status != google.maps.GeocoderStatus.OK) { | |
alert('Cannot find address'); | |
return; | |
} | |
map.setCenter(results[0].geometry.location); | |
map.setZoom(12); | |
}); | |
return item; | |
} | |
}); |
@svub Where do i need to put your code so that autocomplete would work again ? Can't find place where to put it.
Just in case anyone get to this page in the future, as it's like second when googling typeahead with gmaps.
It's totally possible to make typeahead works with google maps easily without hacks :
var geocoder = new google.maps.Geocoder();
$('.typeahead').typeahead({
autoselect: true,
sections: [{
name: 'google',
minLength: 4,
templates: {
header: '<h5 class="typeahead-header">Google Results</h5>'
},
source: function (q, value) {
geocoder.geocode({ address: q }, function (results, status) {
value($.map(results, function (result) {
retval = [];
retval.push({ value: result.formatted_address });
return retval;
}));
});
}
}]
});
source : twitter/typeahead.js#220 (comment)
Couldn't get that to work @Azaret .. No errors, typeahead is initialized, but no dropdown with results.
thx for sharing! :)
@badsyntax You created a project for it on google developer console and assigned the demo an API key.... then you deleted the project. Probably best just not to have given it an API key in the first place
I think it will be a little late to answer @ronnyandre :) But this would be better. And moreover if any map on page it would be fit bounds to selected suggestions geometry
var geocoder = new google.maps.Geocoder();
$('.typeahead').typeahead({
autoselect: true,
minLength: 4,
},{
name: 'google',
displayKey: 'address',
templates: {
header: '<h5 class="typeahead-header">Google Results</h5>'
},
source: function (q, sync, async){
geocoder.geocode({ address: q }, function (results, status) {
for (var i = results.length - 1; i >= 0; i--) {
async([{address:results[i].formatted_address, geometry:results[i].geometry}]);
}
});
}
}
).on('typeahead:selected', function (obj, datum) {
if(datum)
{
var geometry = datum.geometry;
map.fitBounds(geometry.bounds? geometry.bounds : geometry.viewport);
}
});
@ficshelf read the comments in this thread, it's not possible without hacks.