1. Home
  2. Tutorials
  3. Using Native Functionality
  4. Display an Array of Map Locations from an API

Display an Array of Map Locations from an API

pin array
If you have an array of locations from an API you can display them on a map Element in your app. With an API request and a map added to a page:

  1. Open the request Events and select the 200: OK Event. Click the plus plus button to add an Action, choosing Iterate Through Array. Edit the Action.
    • Select the array in your API response, via the Event Data container. iterate event data

    Save the Action.

  2. In the nested Item Event, add another Action, choosing Create a Location Object. Select the latitude and longitude values from the array entry via the Event Data container. location from iterate
  3. Add another Action to Item, this time Add Pin to Map. Select the map Element in the page, the title and subtitle (e.g. from your API response via Event Data), and the location returned by the previous Action via the Action Data container. pin from array
  4. Remember to use Set Visible Map Region either after the Add Pin to Map Action or somewhere else in your app functionality, so that the map will display the relevant area and the pins will be visible.

You can alternatively display place information about a location selected by the user on touching the map. If you need to retrieve readable information about a location, you can also use the Reverse Geocode Location Action. To filter API array results, you can add conditional processing with the If… Else Action.

marker array
If you have an array of locations from an API you can display them on a map Element in your app. With an API request and a map added to a page:

  1. Open the request Events and select the 200: OK Event. Click the plus plus button to add an Action, choosing Iterate Through Array. Edit the Action.
    • Select the array in your API response, via the Event Data container. iterate array
      Save the Action.
  2. In the nested Item Event, add another Action, choosing Create a LatLng Object. Select the latitude and longitude values from the array entry via the Event Data container. latlng array item
  3. Add another Action to Item, this time Create Marker. Select the map Element in the page, the title and subtitle (e.g. from your API response via Event Data), and the location returned by the previous Action via the Action Data container. latlng pin array
  4. Remember to use Set Visible Map Region either after the Create Marker Action or somewhere else in your app functionality, so that the map will display the relevant area and the markers will be visible.

You can alternatively display place information about a location selected by the user on touching the map. If you need to retrieve readable information about a location, you can also use the Reverse Geocode Location Action. To filter API array results, you can add conditional processing with the If… Else Action.

Was this article helpful to you? Yes No

How can we help?