<img src="https://secure.bali6nora.com/144864.png" style="display:none;">

subscribe to our blog

written by Bernie Thibeault

11.21.18 by Bernie Thibeault

How To Add a Maps Control to your PowerApp

Adding a Map control to your PowerApp can be very helpful to end users, but it is not available out of the box (unless we continue to keep voting here). There are many use cases, such as displaying a map based upon an Accounts address, or displaying the location of a Work Order.

Here's a quick way to add the map to your screen by using an Image control and a Bing Maps Key. Please follow the steps here for getting your own Bing Maps Key.

After you have gotten your key, it's time to go into your PowerApp.

Step 1:

This step is as simple as adding a Text Input box to your screen and renaming it to "txtInput." (Or in case you are linking the map to an already existing address, make sure that field or data card is on the screen).

text input

Step 2:

Add a Label control to the screen and rename it "BingMapsKey." Take the key you got from following the steps in the above link and put it as the Text property of the label. Now that you have the Key and Label on the screen, set the Visible property to false, this way users cannot see the map key.

map key

Step 3:

Add an Image control to the screen and rename it "MapControl." Make sure to size and position the map based upon the other controls, forms or galleries on the screen. Now set the Image property to  "https://dev.virtualearth.net/REST/V1/Imagery/Map/Road/" & EncodeUrl(txtInput.Text) & "?mapSize=600," & 300 & "&key="&BingMapsKey.Text. The numbers highlighted in Red (below) help size the map accordingly, so you may need to play around with these numbers depending on the size of the control you created.

map control

It's as simple as that! Test out your map by "playing" the app and typing an address into the txtInput control.

Learn More About PowerApps

Topics: PowerApps

subscribe to our blog