Skip to main content

 

 

 

 
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
OutSystems

How to add a marker on map click

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Prerequisites

    This example demonstrates how to get the coordinates of a location when the user clicks the map.

    1. In Service Studio, in the Toolbox, search for Map.

      The Map widget is displayed.

      Map in the Service Studio toolbar

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    2. From the Toolbox, drag the Map widget into the Main Content area of your application's screen.

      Drag Map widget onto the screen

    3. On the Properties tab, enter an API key so that the "For development purposes" watermark is removed.

      Enter API key

    4. Drag the Map Event block inside the Events_Placeholder.

      Drag Map Event onto the screen

    5. On the Properties tab, set the EventName property to Click.

      This allows you to handle the event every time the user clicks the map.

      Set EventName to Click

    6. Create a handler for the event.

      Create a handler for the event

    7. Create two new local variables (Latitude and Longitude) to store the new coordinate values.

      Create 2 new variables

    8. Create a handler for the event and assign the new marker coordinates to the variables.

      Add an Assign to the event handler

    After following these steps and publishing the module, you can test the component in your app.

    Result

    Result

    • Was this article helpful?