1. Home
  2. Tutorials
  3. Using Native Functionality
  4. Show a Location on a Map from Latitude and Longitude

Show a Location on a Map from Latitude and Longitude

show loc pin
If you have location data in the form of latitude and longitude, for example from an API request, you can show the location on a map in your app page in a few steps. With a Map Element added to a page and your latitude and longitude available in the project:

  1. Add an Action to an Event representing when you want to show the location, for example if the latitude and longitude are coming from an API response, select the request 200: OK Event. Add an Action, and choose Create a Location Object. Edit the Action.
    • In the first input, select the latitude, and in the second select the longitude. For example, to access them from an API Event, choose the Event Data container and navigate to the relevant fields. api event latitude

    Save the Action.

  2. Add another Action, this time Set Visible Map Region.
    • In the Map View input, select the Map Element in the page.
    • In the Distance input, enter a distance number in meters.
    • In the Location input, select the CLLocation object you created using the previous Action, from the Action Data container. action data location
  3. Add another Action, selecting Add Pin to Map.
    • In the Map View input, select the Map Element on the page.
    • In the Title input, select or enter text to display as the pin title, for example from the Event Data if the title is coming from the API request, or a Static Input if you want to enter it manually.
    • In the Subtitle input, select or enter a text string to display in the pin under the title.
    • In the Location input, select the CLLocation object from the Action Data add pin location

When the pin displays on the map, the user will be able to tap it and see the text you added as title and subtitle. You can alternatively display place information about a location selected by the user on touching the map. To retrieve readable information about the location, use the Reverse Geocode Location Action. You can also send location data to the device maps app to show directions.

pin latlng
If you have location data in the form of latitude and longitude, for example from an API request, you can show the location on a map in your app page in a few steps. With a Map Element added to a page and your latitude and longitude available in the project:

  1. Add an Action to an Event representing when you want to show the location, for example if the latitude and longitude are coming from an API response, select the request 200: OK Event. Add an Action, and choose Create a LatLng Object. Edit the Action.
    • In the first input, select the latitude, and in the second select the longitude. For example, to access them from an API Event, choose the Event Data container and navigate to the relevant fields. create latlng

    Save the Action.

  2. Add another Action, this time Set Visible Map Region.
    • In the Map View input, select the Map Element in the page.
    • In the Zoom Level input, enter a double value between 2.0 and 21.0.
    • In the Center input, select the LatLng object you created using the previous Action, from the Action Data container. set region latlng
  3. Add another Action, selecting Create Marker.
    • In the Map View input, select the Map Element on the page.
    • In the Title input, select or enter text to display as the marker title, for example from the Event Data if the title is coming from the API request, or a Static Input if you want to enter it manually.
    • In the Subtitle input, select or enter a text string to display in the marker under the title.
    • In the Location input, select the LatLng object from the Action Data create marker latlng

When the marker displays on the map, the user will be able to tap it and see the text you added as title and subtitle. You can alternatively display place information about a location selected by the user on touching the map. To retrieve readable information about the location, use the Reverse Geocode Action. You can also send location data to the device maps app to show directions.

Was this article helpful to you? Yes No

How can we help?