This is a migrated thread and some comments may be shown as answers.

Autocomplete + Google maps

5 Answers 183 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 1
Dennis asked on 12 Oct 2012, 05:42 PM
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.

5 Answers, 1 is accepted

Sort by
0
Burke
Top achievements
Rank 1
answered on 30 Nov 2012, 11:26 PM
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:
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!
0
Robert
Top achievements
Rank 1
answered on 08 Jul 2013, 08:47 PM
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.

0
Burke
Top achievements
Rank 1
answered on 16 Jul 2013, 01:00 PM
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
0
Tayger
Top achievements
Rank 1
Iron
answered on 10 Nov 2015, 10:15 AM

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.

 

0
Tayger
Top achievements
Rank 1
Iron
answered on 10 Nov 2015, 10:43 AM

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!

 

Tags
AutoComplete
Asked by
Dennis
Top achievements
Rank 1
Answers by
Burke
Top achievements
Rank 1
Robert
Top achievements
Rank 1
Tayger
Top achievements
Rank 1
Iron
Share this question
or