Geo Coder

The Geo Coder control will display a user's address based on their physical location, or a static location using latitude and longitude coordinates can be used as well. This control needs to be used with the Map, OpenLayers API, and Geo Location controls.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

Like the Geo Location control, this control adds another layer of information for a user by allowing them to see where they are on a map, and can be used to provide a point of reference.

When using this control, it is best practice to place the OpenLayers API control at the top of the page (or at the very least, before Map controls)

This control technically does reverse-geo coding (converting latitude and longitude to an address)


Latitude Latitude of the default location

Longitude Longitude of the default location


  1. Use a OpenLayers API Key - See Map & OpenLayers API
  2. Utilize the Geo Location & Geo Coder controls
  3. Display physical address
  4. Map Control and JavaScript Logic

Step 1: OpenLayers API

In order to use maps, you must use the OpenLayers API Control.  Please see Map & OpenLayers API for more details.

Step 2: Geo Location & Geo Coder

The Geo Location control will allow the location of the user to be found and shown on the Map, and the Geo Coder will display a physical address on a text control of your choice (Note, Output Text, Text, etc.).

The structure of the address object can be found in the JSDocs.

Step 3: Displaying the physical address using an Output Text control

This step displays the user's physical address on an Output Text control

Step 4: Map Control and JavaScript Logic

Add the Map Control to the Coach, you may adjust the appearance configuration to your preferences.

Then, you will need to add a Custom HTML Control.  This will communicate with the Map Control to tell the map what coordinates we want to use.

  function updateLocation(me, location) {
     var map = page.ui.get("Map1");    

     //Setting the center of the map and adding a marker
     map.setCenter(location.latitude, location.longitude);

     //Get physical address of user

     var geoCoder = page.ui.get("Geo_Coder1");
     geoCoder.requestAddressLookup(location.latitude, location.longitude);



  • function updateLocation(me, location) -- As noted above, this function was called by the Geo Location control; me references Geo_Location1 and it is passing in information of location
  • var map = page.ui.get("Map1") -- Finding the map, so we can communicate with it.
  • map.setCenter(location.latitude, location.longitude) -- Using the location information that was passed in, we want to set the center of the map using location.latitude and location.longitude.
  • map.addMarker() - Adding a marker to the centered location
  • var geoCoder = page.ui.get("Geo_Coder1") -- Finding the geo location, so we can communicate with it.
  • geoCoder.requestAddressLookup(location.latitude, location.longitude) -- Using the requestAddressLookup method to get address of user

This is the result...


With the Geo Coder control, there are 4 types of event handlers:

  • On Load When the page loads
  • On Location Requested When the location is requested
  • On Location Resolved When the location is resolved
  • On Location Error When there is a location error

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.


For detailed information on the available methods for this control, access the JS Doc file.

Related Article(s)

Geo Location (User's Location)

Map & OpenLayers API


Data Binding & Retrieval

Creating Custom Functions


    • Author: Courtney Silva, Erick Quintanilla
    • Date Created: June 25, 2015
    • Date Modified: June 13, 2016
Was this article helpful?
0 out of 0 found this helpful