Come one come all, to an undisclosed location on the Internet!
Oh wait, we have Google Maps now…..here’s the address. Hey everyone, Jacob here again. Today we’re going to be discussing using the Google Maps API inside of your PowerApps to give easy to use, easy to visualize locations, either by using the physical device’s latitude and longitude, or by manually typing in a street address. First off, here’s a little teaser of what you can expect to make at the end of this….
As you can see, we have a fully functioning location setup! We can either use a manually entered address (first photo), or use the devices inbuilt GPS functionality to figure out the coordinates of the user!
Step 1 – Design the PowerApps Layout
Let’s get started. Fairly simple PowerApp layout, I’ve added notes on this image to make it easier to understand:
Okay! Nice and easy so far. You’ll see that in that photo I mentioned I’d elaborate on the latitude/longitude text label, so here goes:
- This label is set up to show either the current Latitude and Longitude of your devices if the address input is blank.
- If it isn’t blank, it will display whatever address has been manually entered.
To achieve this, set the Text property of the label to the following:
If(IsBlank(ti_addressEntry.Text), Location.Latitude & “, ” & Location.Longitude, ti_addressEntry.Text)
Step 2 – Getting the static map setup in Google
So this part requires a few moving parts. Let’s break it all down.
Getting a Google Maps Static API Key
To get images from Google we need to have a key. A key is tagged to a Google account, and verifies that it’s you making the request.
To get this, we need to sign up to a Google Developers account. You can use your existing Google/GMail account for this. Follow this link and click “Get Started” to sign into your account: Google Developer – Maps
Create your first project and agree to the terms:
You’ll have to set up a billing account in the next stage. I won’t walk you through this section as it’s fairly straightforward.
You’ll need to get an API key next, Here is a great guide from Google on how to do so: Get an API Key
Okay! Once you’ve completed all that and got your Google Maps Static API Key, it’s back to PowerApps!
Step 3 – Configuring the image
What we’re going to do is use the Google Maps API to return us a static map image that we can display. There are a lot of parameters that you can pass to this API (full list here). The ones we care about are:
We’ll get more in-depth as to what an API is in other blogs, so for now here’s the code:
“https://maps.googleapis.com/maps/api/staticmap?&zoom=” & slider_mapZoom.Value & “&size=” & img_map.Width & “x” & img_map.Height & “&markers=color:red%7Csize:mid%7C” & EncodeUrl(If(IsBlank(ti_addressEntry.Text), Location.Latitude & “,” & Location.Longitude, ti_addressEntry.Text))& “&key=YOUR API KEY HERE”
Woah! That’s a lot! Okay, let’s break it down, and show you what to do with it all.
Breaking down the code
https://maps.googleapis.com/maps/api/staticmap?&zoom=” & slider_mapZoom.Value
This component is the API URL. The final section is the “Zoom” paremeter, which you can see is the value of the Slider we’ve put in PowerApps.
& “&size=” & img_map.Width & “x” & img_map.Height & “&markers=color:red%7Csize:mid%7C”
Woah that’s a lot of ampersands. We use these to concatenate strings togethter in PowerApps. This section of code defines the map height and width, based off the size of our image control in PowerApps.
The end section of this defines the markers as red, and size of medium.
& EncodeUrl(If(IsBlank(ti_addressEntry.Text), Location.Latitude & “,” & Location.Longitude, ti_addressEntry.Text))& “&key=YOUR API KEY HERE”
Okay final section! This part will pass the location value to the API. You can see it checks to see whether the address entry text input is empty or not.
- If it’s empty, pass the latitude and longitude of the devices GPS
- If it isn’t empty, pass the address entered in the text input
Also, replace the section at the end with your API key (right where it says YOUR API KEY HERE). And you’re done!
Okay, throw all of that into the Image property of the media we added before, like so:
Final thing, set the OnSelect property of the button to the following code:
And that’s it! Test it out, and congratulations to you!
Now, here’s another tutorial on how to convert that unsightly latitude and longitude to an actual address: PowerAutomate – Transforming Lat/Long to an Address
Catch you in the next blog, happy PowerApps Deving!