Autocomplete + Google maps

[Dennis]

Are there any examples on how to integrate Kendo autocomplete with the google maps geocoder to query addresses?

I haven't been able to find a way how to do this so far so I just use the JqueryUI autocomplete.

[Burke]

Hi Dennis!

This one was fun. :)

So it look like the maps JSON API doesn't provide JSONP access.  This means you have to use the google.maps JavaScript libraries.  Include the library in your page:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

Then create an instance of the geocoder in JavaScript:

// setup the geocoder

var geocoder = new google.maps.Geocoder();

Now the magic is in creating a custom transport for the DataSource.  It's super easy.  Just pass a function to the read, populate an array and pass it to the options.success method.

var maps = new kendo.data.DataSource({

  transport: {

    read: function(options) {

      // call the geocoder

      geocoder.geocode({ 'address': autoComplete.value() },

      function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {

          // return the data to the success method

          options.success(results);

        }

      });

    }

  },

  serverSorting: true

});

Don't forget to turn on serverSorting so that the DataSource keeps query the transport.

Here is a working example:

http://jsbin.com/otomeg/3

Cheers!

[Robert]

Burke:
Thanks! Fantastic sample - this answered a lot of questions for me as I was working on this exact problem.  One question, when you call 

options.success(results);

as a callback to the autoComplete.options; where is this data stored or how can it be accessed?

The reason I ask is that later, in a select event handler, I need to get the full json object for the selected item, from of the data returned by the geocoder and I haven't been able to suss out this piece.  I would rather get the results array from the autoComplete object than have to duplicate it somewhere in my object model.

Thanks again.

[Burke]

Robert

The AutoComplete can technically hold multiple results.  If you are only expected one, you can use the dataItem method in the select event.

var autoComplete = $("#maps").kendoAutoComplete({
  dataSource: maps,
  minLength: 3,
  dataTextField: "formatted_address",
  placeholder: "Type An Address...",
  select: function(e) {
    // e.sender.dataItems is a function that returns the backing dataItem
    // for the index of the item passed
    $("#chosen").append(kendo.stringify(e.sender.dataItem(0)));
  }
}).data("kendoAutoComplete");

And the updated JSBin:  http://jsbin.com/otomeg/11

[Tayger]

I was glad to find a solution for this problem too and tested it out. It crashes when entering an address that obviously doesn't exist: 

 

1. Enter f.e. "jlfhasdhfuadsih"
2. Mark and remove it
3. Enter valid address like "Luz" -> No autocomplete list

I don't know why and how to fix it. There are no errors in console.

 

[Tayger]

Found the problem and a possible solution:

The problem is you don't handle errors coming back from google geocoding. It f.e. crashes on return status "ZERO_RESULTS".
If you change your ​datasource handler to:

var maps = new kendo.data.DataSource({
transport: {
read: function(options) {
geocoder.geocode({ 'address': autoComplete.value() },
function(result, status) {
// if (status === google.maps.GeocoderStatus.OK) {
return options.success(result);
//}
});
}
},
serverSorting: true
});

In this case you ingore the returning status but the dataSource handler seems to be able to handle that and seems to expect a "proper" return value. Im sure there is a more elegant solution. Just wanted to point out the problem. Thanks again for your excellent solution!