Skip to content

SurveyJS Google Maps Address Widget

We provide an address widget that you can download from GitHub under the following link ⧉. After integration this widget in your SurveyJS site, you will be able to use a new question type addressautocomplete in your survey. This question type allows you to complete the related address parts automatically. It is based on the Google Maps and thus ensured that the correct address is output. The usage and configuration are very simple. Autocomplete helps users when entering the address by not having to enter the individual address parts in several text fields, but only in one place. The user selects one of the addresses corresponding to his entries and the parts of this address are then displayed in other question fields according to the assignment. The address parts are automatically filled in from the selected address.

Addressautocomplete Configuration

For using this widget a valid Google API key is required. If the API key is missing, the autocomplete feature will be disabled. To integrate the question type addressautocomplete in to the Process Template Editor/SurveyJS Creator, you enter the Google API key in the ADEPT2.properties:

de.aristaflow.adept2.extensions.surveyjs.ui.GoogleAPIKey = YourGoogleApiKeyHere

Although it is possible to set the Google API in the process template using the "generic activity configuration page" in the plug'n'play wizard, it is recommended to set it in the Runtime.properties using

ActivityConfiguration.$de.aristaflow.form.SurveyJS$Survey#.GoogleAPIKey = YourGoogleApiKeyHere

Addressautocomplete Example

In the following example we will model a process template with using the Address question from SurveyJs and then execute it in Test Client. After configuration as mentioned above you will find the new question type Address in SurveyJS Creator.

We add a question of type addressautocomplete in to the survey by clicking on the Address as shown in the next image.

In the field of the addressautocomplete question, the address will later be entered by the user as in a search field. Then you will find there the formatted address provided by Google. Now we add several questions of type Single Input, to display the address parts from provided address such as street name, postal code, etc.

The assignment of the address to the target questions is done by naming this question, it should be noted that only certain keywords can be used in the naming. If you name the questions as in the following image (streetName, streetNumber, postalCode, city and country), then the address parts will be mapped as follows.

Address Parts

The following names are available for target questions (including the autocomplete question itself):

  • streetName
  • streetNumber
  • postalCode
  • neighborhood
  • sublocality: directly or the highest level provided by Google
  • city: may also be postal_town, sublocality or neighborhood, depending on what is provided
  • administrativeArea: the highest provided by Google
  • countryShort: country code as provided by Google
  • country
  • street: formatted street name followed by number (if available)
  • formattedAddress: address formatted according to Google’s format. This is the default assigned to the autocomplete question.

If a question with one of these names exists, it will be assigned the corresponding address part.

To allow for several autocomplete questions on the same survey, you have to use the name of the autocomplete question as prefix. Otherwise it is not unique which address part belongs to which autocomplete question: An autocomplete question address1 setting a city will try to find a question with the following names in this order:

  1. address1.city
  2. address1city
  3. city

The first question found with one of these names will get the city from the corresponding address as value.

Example: Address parts assignment with prefix

We take the previous example and use addressautocomplete question as a prefix when naming the target questions. We rename the question with the addressautocomplete to Address1. Accordingly, we rename the target questions postalCode and city to Address1postalCode and Address1.city.

As long as we don't have another address question on the same survey, the target questions streetName and streetNumber will be set by Address1. However, if there are multiple Address questions, then the streetName and streetNumber are set from the first question with matching address parts. For clear assignment, we recommend using the prefix when naming the target addresses if there are several address questions. This also works with dynamic panels. In this case the address parts will only be set within each panel; that is, each panel will be independent from other panels even from the same template. In the following survey there are two nested panel dynamics, where the outer contains Address1 and the inner contains Address2.

Even in the second panelDynamic2 there are no problems with the assignment of address parts and no confusion between the panel dynamic question Address1 and the simple question Address1.

Display address parts in autocomplete question using paramName

Since the name of the autocomplete question defines the prefix of the target questions for the address parts, assigning a specific field to the autocomplete question itself works differently. We have to declare the autocomplete question value by setting Activity parameter name appropriately under General tab of the autocomplete question, as shown in the next image. In this way, we enter the value to be displayed in the Json array under the key paramName. In our case, only the city is displayed instead of the complete address in the autocomplete question.

Alternatively, we could use dot notation or just enter city as paramName, so you may use:

  1. Address1city
  2. Address1.city
  3. city

Below you can see the Json array on which the survey is based.

{
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "paneldynamic",
     "name": "panelDynamic",
     "templateElements": [
      {
       "type": "addressautocomplete",
       "name": "Address1",
       "paramName": "Address1city"
      },
      {
       "type": "text",
       "name": "Address1postalCode"
      }
     ]
    }
   ]
  }
 ]
}

For clarification, to create the parameter for the autocomplete question, we take the questionname and the value of the paramName is displayed in the question. In our case this means the parameter is called Address1, but only the city as specified in paramName is displayed under Address1. As always, the address part refers to the formatted default address and accordingly shows the correct value, i.e. in our case the postal code of Address1, see the next image.

To improve readability of the names, we recommend naming each field with an upper-case character when assigning address parts. This is especially useful when combining without separator, e.g. Address1City.