javascriptajaxkendo-uigoogle-places-api

Using Google Places API in Kendo UI Autocomplete


I was trying to use the Google Places API (Places Autocomplete) in my Kendo UI Autocomplete in my mobile web app but I was having hard time finding tutorial on how to do this.

Right now this is what I've done..

        requestUrl = "https://maps.googleapis.com/maps/api/place/autocomplete/json";

        var dsLocations = {
            serverFiltering: true,
            type: "odata",
            transport:
            {
                read: {
                    url: requestUrl,
                    dataType: "json",
                    contentType: "application/json",

                },
                parameterMap: function (options, operation) {
                    var paramMap = kendo.data.transports.odata.parameterMap(options);
                    delete paramMap.$inlinecount; 
                    delete paramMap.$format; 
                    return paramMap;
                }
            },
            schema: {
                data: function (data) {
                    return data;
                },
                total: function (data) {
                    return data.length;
                },

            },
        };

        $("#autocomplete-locations").kendoAutoComplete({
            dataSource: dsLocations,
            minLength: 3,
            filter: "contains",
            dataTextField: "TextForSearch",
            dataValueField: "TextForSearch"
        });

Solution

  • Got it! You dont even need kendo.

    https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform