Autocomplete + Google maps

6 posts, 0 answers
  1. Dennis
    Dennis avatar
    30 posts
    Member since:
    Aug 2012

    Posted 12 Oct 2012 Link to this post

    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.
  2. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 30 Nov 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 08 Jul 2013 Link to this post

    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.

  5. Burke
    Burke avatar
    41 posts
    Member since:
    Jun 2009

    Posted 16 Jul 2013 Link to this post

    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
  6. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 10 Nov 2015 in reply to Burke Link to this post

    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.

     

  7. Tayger
    Tayger avatar
    61 posts
    Member since:
    Jan 2015

    Posted 10 Nov 2015 in reply to Tayger Link to this post

    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!

     

Back to Top
Kendo UI is VS 2017 Ready