Purpose
 You want to support the user when entering addresses by making suggestions during the input.

We show this by means of the address entry in transaction BP - Business Partner:
Solution
 Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. The autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes. Applications can therefore send queries as the user types, to provide on-the-fly place predictions.

Requirements:
As you need an API key for the Google Service, you may need to create an account in the Google Cloud Platform. At present, use is free of charge up to a relatively generous quota.

Essentially, with the GuiXT controls, you embed an HTML page that includes some JavaScript and calls the Google service for address completion. After the user selects an address from the list, a GuiXT JavaScript object is used to insert the parts of the address into the corresponding fields on the SAP screen.
Implementation
 We define the API key and the filename of the InputScript, that will be started when the user selects an address from the list of suggestions. Occurrences of the corresponding placeholders in the HTML template are automatically replaced with the corresponding values.

In this example, the placeholders &[apikey] and &[inputscript] are replaced with the values that we assign to the GuiXT variables apikey and inputscript.

GuiXT Script
// Enter your Google API key here
Set   V[apikey]   "myAPIkey"
 
// Define an InputScript to run after seleting an address
Set   V[inputscript]   "UpdateAddress.txt"
 
// Generate the HTML file from the template
CopyText  _ 
   fromTemplate="C:\guixtscripts\html\autocomplete_template.html"  _     
   toText="temp"
 
CopyText  _ 
   fromText="temp"  _ 
   toFile="C:\guixtscripts\html\autocomplete.html"
 
// Embed the Google HTML file
WebView     (21.6,2.8)     (26.8,77)  _
   "C:\guixtscripts\html\autocomplete.html"  _
   -closeOnHide      name="googleaddress"    
 
// Connect it to GuiXT
connecthtml   name="googleaddress"

(The Google API can no longer be used with the Internet Explorer Control - GuiXT command "control" - but only works with the WebView.)


InputScript "AutoComplete.txt"
// Set address data from Google API
Set   F[ADDR1_DATA-STREET]     "&V[route]"
Set   F[ADDR1_DATA-HOUSE_NUM1]   "&V[street_number]"
Set   F[ADDR1_DATA-CITY1]    "&V[locality]"
Set   F[ADDR1_DATA-POST_CODE1]    "&V[postal_code]"
Set   F[ADDR1_DATA-REGION]   "&V[administrative_area_level_1]"
Set   F[ADDR1_DATA-COUNTRY]   "&V[country]"


Autocomplete_template.html 
<!DOCTYPE html>
<html>

<head>
    <title>Place Autocomplete Address Form</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #locationField {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 99%;
        }

        #controls {
            position: relative;
            width: 515px;
        }

        #autocomplete {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 99%;
        }
    </style>
    <link type="text/css" rel="stylesheet" 
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    
    <script src="https://maps.googleapis.com/maps/api/js?key=&[apikey]&libraries=places&language=en"></script>
    <script>

        var guixt;

        function guixt_initialize(obj) {
            guixt = obj;
        };

        var placeSearch, autocomplete;
        var componentForm = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            country: 'short_name',
            postal_code: 'short_name'
        };

        function initialize() {

            var optionsAuto = {

                types: ['address'],
                componentRestrictions: {
                    country: ["de", "ch"]
                }
            };
            autocomplete = new google.maps.places.Autocomplete(
            /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
                optionsAuto);

            // When the user selects an address from the dropdown
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                fillInAddress();

            });
        }
        function fillInAddress() {

            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();

            // Get each component of the address from the place details
            for (var i = 0; i < place.address_components.length; i++) {

                var addressType = place.address_components[i].types[0];

                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];

                    // Set GuiXT variable                  
                    guixt.Set(addressType, val);
                }
            }
            // Start InputScript 
            guixt.input("OK:process=&[inputscript]");
        }
    </script>
</head>

<body style="overflow-y: auto;   background-color:#D4E5F4;" onload="initialize()">
    <div id="locationField">
        <input id="autocomplete" placeholder="Please type address to search via Google" type="text"
            style="font-family: Arial; font-size: 9pt;"></input>
    </div>
</body>

</html>


Explanation of options:
  • You can choose the language of the UI and suggestions with the "language=" parameter in the script tag.
  • Use the "optionsAuto" object to define options and restrictions. In this example, we only allow results from germany and switzerland.
Please also have a look at the API documentation for further options and details:
Google Maps Platforrm - Places Autocomplete

Download:

 All files for this project can be downloaded here:
google_guixt_autocomplete.zip
Components InputAssistant+Controls