Have a project ? Need support ?

Fork on Github

Google Maps address lookup with auto completion

Autocomplete
version 1.0

This example show how to create the classical search function of address with auto-completion.
This example use the this autocomplete plugin for jQuery

Once the address is selected, a marker is added and the map is centered on it (previously marker are removed)

Address :
$("#test").gmap3();

$('#address').autocomplete({
  source: function() {
    $("#test").gmap3({
      action:'getAddress',
      address: $(this).val(),
      callback:function(results){
        if (!results) return;
        $('#address').autocomplete(
          'display', 
          results,
          false
        );
      }
    });
  },
  cb:{
    cast: function(item){
      return item.formatted_address;
    },
    select: function(item) {
      $("#test").gmap3(
        {action:'clear', name:'marker'},
        {action:'addMarker',
          latLng:item.geometry.location,
          map:{center:true}
        }
      );
    }
  }
});