Googe places autocomplete implementation using Twitter bootstrap typeahead and google's autocomplete and geocoding services

gistfile1.js

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

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?

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

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