Geo Coder control

By using this control, you can display a user's address, based on the physical location of that user.

You can also specify latitude and longitude coordinates because the Geo Coder control can convert them to an address. This control is used in association with the Map, OpenLayers API, and Geo Location controls.

Like the Geo Location control, the Geo Coder control 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 control at the top of the page or, at the very least, before the Map control. For more information, see Map control and OpenLayers API control.

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 control to specify an API key.
Use the Geo Location control to find the user's location and display it on the Map.
Use the Geo Coder control to display a physical address on a text control, such as Note, Output Text, Text, or others.
Add the Map control to the Coach and adjust the appearance properties as appropriate.

Add a Custom HTML control to have the Map Control 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 control. 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.

Events

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

For the Geo Coder control, 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 the Geo Coder control, see the JavaScript documentation.

Additional resources

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

For information about associated geographical controls, see Geo Location control, Map control, and OpenLayers API control.