The Places control will display desired places based on location coordinates, location type, and radius.

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).

This control adds convenience with using maps, since it can easily provide relevant places of interest for a user.


  1. Use a OpenLayers API Key - See Map & OpenLayers API
  2. Utilize the Geo Location & Places controls
  3. Displaying Places
  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 & Places controls

The Geo Location control will allow the location of the user to be found and shown on the Map, and the Places will display the desired places and their locations.


Step 3: Displaying Places

This step displays the gas stations list (these are the places we want to list) using a Multi Select 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 and places we want to see.

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);


  var placesSearch = page.ui.get("Places1");

                radius: 10000,
                types: ["fuel"],



  • 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 placesSearch = page.ui.get("Places1") -- Finding fuel places nearby user's location using the requestNearbySearch method.

This is the result...


With the Places 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

Geo Coder

Data Binding & Retrieval

Creating Custom Functions


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