Skip to content

Instantly share code, notes, and snippets.

@badsyntax
Last active November 14, 2022 22:54
Show Gist options
  • Save badsyntax/4330899 to your computer and use it in GitHub Desktop.
Save badsyntax/4330899 to your computer and use it in GitHub Desktop.
Googe places autocomplete implementation using Twitter bootstrap typeahead and google's autocomplete and geocoding services
/**
* 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;
}
});
@toolsmith
Copy link

I completely agree...I've been trying to migrate my old bootstrap code using autocomplete and typeahead to 3.0 but it has been a nightmare! Has anyone else had any luck in doing so?

@svub
Copy link

svub commented Oct 7, 2013

Found a hack fpr the new typeahead so that suggestions can be provided using a callback method again.
It goes something like this:

(t = $("field")).typeahead({ local: [] });
t.data("ttView").datasets[0].getSuggestions = function(query, callback) {
  var suggestions = ... gather your suggestions here ...
  var data = [];
  for (suggestion in suggestions) { data.push(this._transformDatum(suggestion)); }
  callback(data)
}

More details at http://svenbuschbeck.net/wordpress/2013/10/callback-method-for-twitters-typeahead/
Guess this should allow you to use autocomplete again easily.

@ficshelf
Copy link

ficshelf commented Jan 9, 2014

this is great. many thanks!

I am however wrecking my brain trying to port your example to the latest twitter typeahead.js instead of the bootstrap 2 version. help?

@badsyntax
Copy link
Author

@ficshelf read the comments in this thread, it's not possible without hacks.

Copy link

ghost commented Apr 27, 2014

@svub Where do i need to put your code so that autocomplete would work again ? Can't find place where to put it.

@Azaret
Copy link

Azaret commented Dec 31, 2014

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)

@ronnyandre
Copy link

Couldn't get that to work @Azaret .. No errors, typeahead is initialized, but no dropdown with results.

@vinicius33
Copy link

thx for sharing! :)

@tomhalley
Copy link

tomhalley commented Apr 24, 2017

@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

@safakz
Copy link

safakz commented Oct 24, 2017

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);
                                            }
                                        });

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