Lost? Need direction? – Add an interactive map component in Power Apps

Looking for directions, lost in the way, add the Interactive Map component in Power App!

The interactive map component was released last year, and it is so good to see the level of functionalities achieved. I have posted the official docs at the end. In my R&D, I have found the interactive map useful, easy to configure and use; especially with the level of details it provides. Depending upon the need, you can save the data in your Dataverse (aka CDS) or any other source of your choice.

PS – While doing R&D for this blog, the only constant song running my mind was Maps by Maroon5, listen it here

Pre-requisites – Before we go and add the Map component in our Power app, let’s do the pre-requisite steps.

Navigate to Power Platform admin center – https://admin.powerplatform.microsoft.com/ and turn on the Geospatial services

Note – You need to have admin rights to be able to turn this on or reach out to your global admin.

Once you have turned this on, you can see two controls –

Address input
Map

So now there are ways we can use the interactive map component –

Either input the address in the Address Input control
Or, Show the existing address on the map

I am quickly adding an Address Input control on the screen & updating its OnAddressSelect property.

Multiple properties that are available to use, but I am only making use of a few to save them to my collection variable

Collect(
    varAddress,
    {
        country: AddressInput2.Country,
        lat: AddressInput2.SelectedLatitude,
        long: AddressInput2.SelectedLongitude,
        address: AddressInput2.FreeformAddress
    }
)

Next, I want to quickly check my collection data, so to cross-check you can either use a Data Table or HTML text control and verify

Setup Data Table –

Insert data table from the Insert tab & update its Items property with collection variable name

Next, choose the fields you want to verify/show from the collection. I added everything & it like below –

Setup HTML Text –

“Latitude:” & AddressInput2.SelectedLatitude & “<br>
Longitude:” & AddressInput2.SelectedLongitude & “<br>
Country:” & AddressInput2.Country & “<br>
Address:” & AddressInput2.FreeformAddress & “<br>”

PS -If you don’t know HTML, you can learn it from w3schools

Note – Only the variables defined in collection, would be used and saved unless its explicitly stored in Dataverse / SP. In this blog, I am not saving the collection variable.

Let’s finally put the interactive map component to the canvas app & update the items of Map with collection variable

Add the fields you want to see on the pin when you search for the address

I also update the info card to the “On hover” property, so you take your mouse on the pin in the map, it will give you all the data of fields added above.