Times Square, New York, Seattle etc…įor rendering the Map, use the following formula in the Image property of the imgMapControl :įor Bing Maps Use: "" & EncodeUrl(txtLocation.Text) & "?mapSize=" & txtImageWidth & "," & txtImageHeight & "&key="&txtBingMapsKey.Textīing Maps: Refer to the Get a Static Map article for examples and other parameters.įor Google Maps Use: "" & EncodeUrl(txtLocation.Text) & "&size=" & txtImageWidth & "x" & txtImageHeight & "&key="&txtGoogleMapsKey.Text Move it to a location in the screen where appropriate.Ĭhange Hint Text as “Enter a location or address” and keep Default as an empty string “” or your favorite location – for e.g. Let’s insert a Text input control to enter the location or address for the map: Insert Tab > Text > Text input. Scenario 1: Display a map for a given named location or address Set the Width to txtImageWidth and Height to txtImageHeight. Rename the control from Image1 to imgMapControl. Insert > Media > Image control to add a new Image to the screen. Move the MainScreen Up by clicking on the Move Up icon in the context menu
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). 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.Ĭopy the txtImageWidth (CTRL + C) and Paste (CTRL + V) in the same screen to create a copy. Insert another Text input control from the Insert tab > Text > Text input. Change HintText 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. 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). Insert a Text input control from the Insert Tab > Text > Text input Rename the Screen1 to ConfigurationScreen from the Tree view on the left side. We’ll first create a Configuration Screen to store some information which can be used by other screens in the app. In the PowerApps Studio or Web, Create a New Blank app (pick either Phone or Tablet layout as per your need). Note down the Key for use later in the tutorial. Get the Bing Maps API Key by visiting this URL OR the Google Static Maps API Key by visiting this URL.
Here are the scenarios that we will build today using the Image Control: While we don’t yet have a Maps Control in PowerApps, we can use the Image Control to display maps – thankfully to Bing Maps OR Google Maps via the Bing Maps Imagery API & Google Static Maps API respectively. There have been a lot of requests from the community about the ability to display a map in PowerApps.
0 kommentar(er)
