Map scenarios

Here are the scenarios that we will build today using the Image Control:

Display a map for a given named location or address

Display a map for the current GPS location of the device

Zoom In / Zoom Out using a Slider

Navigate to the Maps app or Web Page when clicked

Preparation

Get the Bing Maps API Key by visiting this URL OR the Google Static Maps API Key by visiting this URL. Note down the Key for use later in the tutorial.

In the PowerApps Studio or Web, Create a New Blank app (pick either Phone or Tablet layout as per your need).

Add a Configuration Screen

We’ll first create a Configuration Screen to store some information which can be used by other screens in the app. Rename the Screen1 to ConfigurationScreen from the Tree view on the left side.

Insert a Text input control from the Insert Tab > Text > Text input

Rename the control from TextInput1 to txtBingMapsKey (If you want to use the Bing Maps API) or txtGoogleMapsKey (if you want to use Google Maps API). ChangeHintText to “Enter Maps Key here” and the Default to the ACTUAL KEY value from the Bing Maps or the Google Maps site from the first step of this tutorial.

Insert another Text input control from the Insert tab > Text > Text input. Rename this control to txtImageWidth, change Hint Text to “Enter Maps Image Width here”, change Default to “600” (if phone layout) or “1200” (if tablet layout), change Format to Number from the Properties pane on the right.

Copy the txtImageWidth (CTRL + C) and Paste (CTRL + V) in the same screen to create a copy. Rename the control to txtImageHeight, change the Hint Text to “Enter Maps Image Height here”, change Default to “300” (for phone layout) and “600” (for tablet layout).

Add the Main Screen

Insert > New Screen > Blank layout.

Rename the Screen2 to MainScreen.

Move the MainScreen Up by clicking on the Move Up icon in the context menu

Insert > Media > Image control to add a new Image to the screen.

Rename the control from Image1 to imgMapControl. Set the Width to txtImageWidth and Height to txtImageHeight.

Scenario 1: Display a map for a given named location or address

Let’s insert a Text input control to enter the location or address for the map: Insert Tab > Text > Text input. Rename the control to txtLocation. Move it to a location in the screen where appropriate.

Change Hint Text as “Enter a location or address” and keep Default as an empty string “” or your favorite location – for e.g. Times Square, New York, Seattle etc…

For rendering the Map, use the following formula in the Image property of the imgMapControl :