Rename the control to drpBingImagerySets. Insert > Controls > Dropdown to add a dropdown. Lets add a dropdown to see the effect of changing these imagerySets. Here are the screenshots for the Location: Space Needle, Seattle using Bing Maps:Īnd here is the same location using Google Maps (note the size is restricted to 640×640 in Google Maps, as I am using a Free version of the API):Ĭhanging ImagerySets (Bing Maps) and Map Types (Google Maps):īing Maps supports multiple imagerySets. Google Maps: Refer to examples and parameters in the Google Static Maps Developer Guide. 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. Navigate to the Maps app or Web Page when clicked.Display a map for the current GPS location of the device.
0 Comments
Leave a Reply. |