Show Your Location on a Map in Power Apps

Power Apps has some geospatial features such as the Map control, but they are premium and also must be enabled in the Power Platform admin centre by someone who is suitably authorised.

These limitations might be a road block to you, or your need for a location on a map might not warrant the ~US$10 per user per month per app to unlock this feature.

Thankfully, a number of 3rd parties provide static maps APIs that return an image. Any web URL that returns an image can be used in the Power Apps Image control’s Image property, with the response being displayed in the image control. Google static maps would be the most well known, but there are others such as and even Bing.

All of these require a bit of set up their side and depending on how much you plan to use the APIs, there are various pricing tiers. All of them have a basic free tier for dev/test and non-commercial use.

They’re all well documented so I won’t cover how to get set up with these tools (follow the links above), but for the purpose of my demo I’m going to use Google.

So, I’ve covered the prerequisite of getting a Google Static Maps API key. Next, over to Power Apps Studio.

Let’s start with a little bit about the Location signal.

Power Apps can poll your devices location (if you have allowed the Power Apps app to do that on your device) and can also get the location via the web browser:

The location is available to use in your app via the Location signal. It has 3 outputs, Latitude, Longitude and Altitude.

Here they are being displayed in a text label:

Another feature of Power Apps is the ability to disable the signal and re-enable it. The primary reason for this feature is to prevent power drain in mobile devices caused by constantly keeping the location sensor active.

It can also prevent actions that happen when the location changes from being triggered repeatedly.

This button simply enables the location and instantly disables it again. It has the effect of getting the current location without keeping the location signal open all the time.

Now let’s put an image control on the screen:

Yes, I know I have blocked out my coordinates and yet I have posted a map with the pin dropped right on it.

"" & EncodeUrl(Location.Latitude&","&Location.Longitude) & "&zoom=" & sld_mapZoom.Value & "&size=" & Self.Width & "x" & Self.Height & "&key=Axxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

You can see how the URL is constructed in the Image property. I have used a slider as an input to adjust the zoom level.

In some solutions I have used a toggle control to switch the pin on and off using the “markers” query: markers={lat,lon} or center={lat,lon}

The “size” query parameter takes a width x height in pixels, so by using Self.Width and Self.Height in here you can develop a responsive app where your image control width might be Parent.Width * 10% or some other dynamic value and the Google maps API will return an appropriately sized image.

Now, the reason for that Get location button earlier. Every time the location changes you will cause another hit to the maps API.

You don’t really want that in most cases as you’ll risk exhausting your API quota unnecessarily. Your device changes location slightly all the time even when you’re stood still, as the vagaries of GPS drift you around a small amount, and each time that happens, the Image control will hit the Google static API again.

You can provide a button or icon for the user to tap to enable then disable the location sensor, which will update the map, or you could use another behaviour formula such as screen OnVisible etc to get an updated location, or even a repeating timer that gets a location every minute or something.

Don’t forget to disable the sensor with Disable(Location) when the app starts so you don’t have to wait until the user first taps the button before it’s disabled.

Using this technique, you can provide a “Show my location on a map” feature in your app for a much lower cost than the native Map control.

The Google static maps API also takes text input as the marker= or center= query so you can use a text input in your app to find an address or landmark too.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s