5 Answers, 1 is accepted
![](/forums/images/avatarimages/c081c338-0943-4619-a5c8-5397d7c1936a0f6c0ee268c9e4ee70e3bb5e3a3f5ee1.jpeg)
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
>
// setup the geocoder
var
geocoder =
new
google.maps.Geocoder();
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
});
Here is a working example:
http://jsbin.com/otomeg/3
Cheers!
![](/forums/images/avatarimages/51ade242-f517-49ff-ae01-3ca05b0a8f85altman%20(renfest)%20cropped.jpg)
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.
![](/forums/images/avatarimages/c081c338-0943-4619-a5c8-5397d7c1936a0f6c0ee268c9e4ee70e3bb5e3a3f5ee1.jpeg)
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");
![](/forums/images/avatarimages/default.gif)
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.
![](/forums/images/avatarimages/default.gif)
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!