Geo coder

Displays a user's address based on the physical location of the user, or converts latitude and longitude coordinates into an address. It must be used with the Map, OpenLayers API, and Geo location views.

Like the Geo location view, the Geo coder view adds another layer of information by allowing users to see where they are on a map. You can use it to provide a point of reference. For more efficiency, first place the OpenLayers API view at the top of the page or, at the very least, before the Map view. For more information, see Map and OpenLayers API.

Example

In this example, you select an API key for a map, locate and display an address, customize the map aspect, and communicate the location to the map.

Use the OpenLayers API view to specify an API key.
Use the Geo Location view to find the user's location and display it on the Map.
Use the Geo coder view to display a physical address on a text view, such as Note, Output Text, Text, or others.
Add the Map view to the page and adjust the appearance properties as appropriate.

Add a Custom HTML view to have the Map view communicate the coordinates to the map.

<script>
  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);
     map.addMarker();

     //Get physical address of user

     var geoCoder = page.ui.get("Geo_Coder1");
     geoCoder.requestAddressLookup(location.latitude, location.longitude);
  }
</script>

This HTML code reads as follows.

function updateLocation(me, location): This function is called by the Geo Location view. The me parameter references Geo_Location1 and passes in location information.
var map = page.ui.get("Map1"): This function finds the map to enable communication with it.
map.setCenter(location.latitude, location.longitude): This function uses the location information that was passed in to set the center of the map from the location.latitude and location.longitude parameter values.
map.addMarker(): This function adds a marker to the centered location.
var geoCoder = page.ui.get("Geo_Coder1"): This function finds the geographical location to enable communication with it.
geoCoder.requestAddressLookup(location.latitude, location.longitude): This function uses the requestAddressLookup method to infer the user's address from the location.latitude and location.longitude parameter values.

The result shows the user's location as shown in the following map.

A street map is shown, with a marker at the user's location

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events.

For the Geo coder view, you can activate the following event handlers:

On load when the page loads, for example me.requestAddressLookup(${Geolocation}.getData().latitude, ${GeoLocation}.getData().longitude)
On Address requested when the location is requested, for example console.log("Address requested")
On Address resolved when the location is resolved, for example ${Location}.setText(address.formatted);
On Address error when an error occurs at location retrieval, for example ${LocationErrorText}.setVisible(true)

Methods

For detailed information on the available methods for Geo coder, see the Geo coder JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.

For information about associated geographical views, see Geo location, Map, and OpenLayers API.