Power Apps – Map Control Pins

This blueprint will demonstrate placing pins on desired locations inside the map control in Power Apps. This demo will show two pins on different locations, one for a warehouse location and another for a retail store location.

Step 1:

We will be creating a collection with sample data.

Insert a button and name it Button1. Change the following properties:

Text property

"Collect"

OnSelect property

ClearCollect(collMyCollection,
Table(
    {
    Place:"Retail Shop",
    Longitude:121.0798013253471,
    Latitude:14.60252857083171,
    Color:Color.Green,
    Icon:Icon.Waypoint
    },
    {Place:"Warehouse",
    Longitude:121.08533441390776,
    Latitude:14.60494875913663,
    Color:Color.Blue,
    Icon:Icon.Waypoint
    }
))

Note: This collection has sample coordinates (longitude and latitude) of a location. To get the coordinates of a specific location. You can use Google Maps to do this.

Step 2:

Activate play mode. Click on the button so that our collection will be created. Check that the collection named collMyCollection has data.

The collection should look like the table below:

Step 3:

Insert a map control and name it Map1. Change the following properties:

Items property

collMyCollection

ItemsColors property

"Color"

ItemsIcons property

"Icon"

ItemsLabels property

"Place"

ItemsLatitudes property

"Latitude"

ItemsLongitudes property

"Longitude"

Note: As you will notice the last 5 properties above are asking for the specific column name from the collection.

Activate play mode. Interact with the map. You will notice the marker of the retail shop in green and the warehouse in blue.

Now you can modify the locations by manipulating the data in the collection. If you need more pins, just add another row to the collection. Of course, make sure that the new pins are not too far off from the other pins or you may not locate them.