#PowerPlatformTip 72: 'PowerApps with Google Maps API'

TL;DR: Read the device position from the Location signal (Location.Latitude, Location.Longitude), build a Google Maps Static API URL from it and put that URL into the Image property of a plain Image control. For a full interactive map, open Google Maps with Launch(). No connector, no flow, no premium license.

Showing “where am I” or “where is this customer” on a map is one of the most requested features in field apps. A canvas app can do that with Google Maps and two standard controls.

💡 Challenge

The obvious idea, pasting the Google Maps JavaScript API into an HTML text control, does not work: the HTML text control renders HTML but does not run scripts. A custom connector would work, but it is a premium feature. You need a map in the app with standard licensing.

✅ Solution

Split the job in two:

• Map in the app: the Google Maps Static API returns a ready map image for a URL. An Image control can display it directly.
• Interactive map: a Google Maps URL opens the location in the Google Maps app or browser, no API key needed.

🔧 How It’s Done

1. Prepare the API key.

🔸 In the Google Cloud console, enable the Maps Static API and create an API key.

🔸 Restrict the key to the Maps Static API only and set a daily quota. The key travels inside the image URL, so every app user can see it.

🔸 Store it in a variable in App.OnStart, for example Set(varMapsKey, "<your key>"), or in a configuration table if you rotate keys.

2. Read the device location.

🔸 Location is a signal, not a function. Location.Latitude and Location.Longitude return the current position and recalculate whenever it changes.

🔸 On first access the device can ask the user for permission. As long as no position is available, the values are blank, which is why the formula below checks IsBlank first.

3. Build the map URL in the Image control.

🔸 Add an Image control and set its Image property to:

If(
    IsBlank(Location.Latitude),
    "",
    With(
        {
            pos: Text(Location.Latitude, "0.000000", "en-US") & "," &
                 Text(Location.Longitude, "0.000000", "en-US")
        },
        "https://maps.googleapis.com/maps/api/staticmap?center=" & pos &
        "&zoom=15&size=640x400&scale=2&markers=color:red%7C" & pos &
        "&key=" & varMapsKey
    )
)

🔸 Text(..., "en-US") forces a decimal point, so the URL also works for users with a German or French language setting. %7C is the encoded | the markers parameter needs.

🔸 size is limited to 640x640, scale=2 doubles the pixel density for sharp images on phones.

4. Open the interactive map.

🔸 Add a button with OnSelect:

Launch(
    "https://www.google.com/maps/search/?api=1&query=" &
    Text(Location.Latitude, "0.000000", "en-US") & "," &
    Text(Location.Longitude, "0.000000", "en-US")
)

🔸 On a phone this opens the Google Maps app, in the browser a new tab with the map.

5. Use stored coordinates instead of the device.

🔸 Replace Location.Latitude and Location.Longitude with the columns of the selected record, for example Gallery1.Selected.Latitude, to show a customer site instead of the user.

🎉 Result

The screen shows a map image with a red pin at the current position, and one tap opens the same spot in Google Maps for navigation.

🌟 Key Advantages

🔸 Standard controls only: Image control, button and the Location signal.

🔸 No premium: no custom connector, no HTTP action.

🔸 Works on every device: a map image renders in the browser, in Teams and in the mobile player.

⚠️ Good to Know

🔸 Google bills Maps Platform per request after a monthly free allotment per product. Google changed this model in 2025, so check the current Google Maps Platform pricing before you roll the app out.

🔸 Google recommends signing Static API requests with a digital signature. Signing needs a secret and therefore a backend, so for a pure canvas app restrict the key and set quotas instead.

🔸 Location updates drain the battery. Power Apps turns them off automatically when the displayed screen doesn’t depend on Location, and you can switch them yourself with Disable(Location) and Enable(Location).

🎥 Video Tutorial

🛠️ FAQ

1. Do I need a premium Power Apps license to show Google Maps?

No. The Image control and Launch() are standard. You only need a Google Cloud project with billing for the Static API key.

2. Why not use the HTML text control with the Maps JavaScript API?

The HTML text control doesn’t execute JavaScript, so the interactive map never loads. Use the static image inside the app and Launch() for interaction.

3. Why does my map show the wrong place for some users?

Usually the decimal separator. Without Text(..., "en-US") a user with a German language setting can produce 47,123 instead of 47.123, and the URL breaks.

🔗 Related Tips

🔸 #PowerPlatformTip 44: ‘Calculate the Distance’ - skip the Maps API entirely when all you need is a distance number.

🔸 Merge Images in PowerApps Without Flow - another no-premium way to add rich visual content to a canvas app.