Google Places AutoComplete API

[Sai Krishna21]

Need help in implementation to verify address on a catalog form using Google Places AutoComplete API.

Explanation: We are looking for a field which verifies address when a user starts typing their address. User should be able to select from the dropdown list.

I have tried using Google Places Autocomplete API but here I had to use two fields one to type in the keyword for address or address and another dropdown field for addresses from Google Places.

I am looking for a solution which can help in verifying address as a user types in, using one field.

I used onChange client script for the catalog variable.

Catalog Client Script:

function onChange(control, oldValue, newValue, isLoading)

{

    if (isLoading || newValue == '')

    {

        return;

    }

    g_form.clearOptions("predected_address");

    var API = new GlideAjax('GooglePlacesAPI');

    API.addParam('sysparm_name', 'getAddressDetails');

    API.addParam('sysparm_query', newValue);

    API.getXML(Ajax);

    function Ajax(response)

    {

     var answer = response.responseXML.documentElement.getAttribute("answer");

     //alert(answer);

     answer = JSON.parse(answer);

     //alert(answer.length);

     g_form.addOption("predected_address", "--None--", "--None--");

     for (var i = 0; i < answer.length; i++)

      {

        g_form.addOption("predected_address", answer[i], answer[i]);

        g_form.addOption("test_field", answer[i], answer[i]);

      }

    }

}

Script Include:

var GooglePlacesAPI = Class.create();

GooglePlacesAPI.prototype = Object.extendsObject(AbstractAjaxProcessor,

{

  getAddressDetails: function ()

  {

    var addressARR = [];

    var query = this.getParameter('sysparm_query');

    var apiKey = ''; //cannot put in the API key as this is confidential.

    var url = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=' + encodeURIComponent(query) + '&key=' + apiKey; //https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Tenali&key=AIzaSyCgP_uk4etcHBguKd...

    //REST API call

    var request = new sn_ws.RESTMessageV2();

    request.setHttpMethod('GET');

    request.setEndpoint(url);

    var response = request.execute();

    var responseBody = response.getBody();

    var responseJson = JSON.parse(responseBody);

    if (response.getStatusCode() == 200)

    {

      gs.info('GOOGLE PLACES API Response: ' + JSON.stringify(responseJson));

      if (responseJson && responseJson.predictions)

      {

        gs.info('GOOGLE PLACES API Predictions Length: ' + responseJson.predictions.length);

        var address = responseJson.predictions[0].description;

        for (var i in responseJson.predictions) //for(var i =0; i< responseJson.predictions.length;i++)

        {

          //JSON.stringify(

          addressARR.push(String(responseJson.predictions[i].description));

        }

        gs.info('GOOGLE PLACES API Predictions Desc ARR: ' + addressARR.join('\n'));

        return JSON.stringify(addressARR);

      }

      else

      {

        gs.error('Google Places API call failed. Status: ' + response.getStatusCode());

        return null;

      }

    }

  },

  type: 'GooglePlacesAPI'

});