{"id":157,"date":"2017-10-18T08:08:56","date_gmt":"2017-10-18T15:08:56","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/image-control-static-maps-api\/"},"modified":"2025-06-11T08:11:28","modified_gmt":"2025-06-11T15:11:28","slug":"image-control-static-maps-api","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/image-control-static-maps-api\/","title":{"rendered":"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API"},"content":{"rendered":"

\u00a0<\/p>\n

There have been a lot of requests from the community about the ability to display a map in PowerApps. While we don\u2019t yet have a Maps Control in PowerApps, we can use the Image Control<\/a> to display maps – thankfully to Bing Maps<\/strong><\/a> OR Google Maps<\/strong><\/a> via the Bing Maps Imagery API<\/strong><\/a> & Google Static Maps API<\/strong><\/a> respectively.<\/p>\n

\u00a0<\/p>\n

Map scenarios<\/h2>\n

Here are the scenarios that we will build today using the Image Control:<\/p>\n

\u00a0<\/p>\n

    \n
  1. Display a map for a given named location or address<\/li>\n
  2. Display a map for the current GPS location of the device<\/li>\n
  3. Zoom In \/ Zoom Out using a Slider<\/li>\n
  4. Navigate to the Maps app or Web Page when clicked<\/li>\n<\/ol>\n

    <\/h3>\n

    Preparation<\/h3>\n

    \u00a0<\/p>\n

    Get the Bing Maps API Key by visiting this URL<\/a> OR the Google Static Maps API Key by visiting this URL<\/a>. Note down the Key for use later in the tutorial.<\/p>\n

    In the PowerApps Studio or Web, Create a New <\/strong>Blank app (pick either Phone or Tablet layout as per your need).<\/p>\n

    \u00a0<\/p>\n

    \"image\"<\/p>\n

    \u00a0<\/p>\n

    Add a Configuration Screen<\/h4>\n

    We\u2019ll first create a Configuration Screen to store some information which can be used by other screens in the app. Rename<\/strong> the Screen1<\/strong> to ConfigurationScreen<\/strong> from the Tree view on the left side.<\/p>\n

    \"image\"
    \nInsert<\/strong> a Text input <\/strong>control from the Insert <\/strong>Tab > Text <\/strong>> Text input <\/strong>
    \n\"image\"<\/p>\n

    \u00a0<\/p>\n

    Rename<\/strong> the control from TextInput1<\/strong> to txtBingMapsKey <\/strong>(If you want to use the Bing Maps API) or txtGoogleMapsKey<\/strong> (if you want to use Google Maps API). Change<\/strong> HintText<\/strong> to \u201cEnter Maps Key here\u201d and the Default <\/strong>to the ACTUAL KEY value from the Bing Maps or the Google Maps site from the first step of this tutorial.<\/p>\n

    \u00a0<\/p>\n

    Insert <\/strong>another Text input <\/strong>control from the Insert <\/strong>tab > Text<\/strong> > Text input. Rename <\/strong>this control to txtImageWidth, <\/strong>change Hint Text to \u201cEnter Maps Image Width here\u201d, change Default <\/strong>to \u201c600<\/strong>\u201d (if phone layout) or \u201c1200<\/strong>\u201d (if tablet layout), change Format<\/strong> to Number <\/strong>from the Properties pane on the right.<\/p>\n

    \"image\"<\/p>\n

    \u00a0<\/p>\n

    Copy <\/strong>the txtImageWidth (CTRL + C) and Paste (CTRL + V) in the same screen to create a copy. Rename <\/strong>the control to txtImageHeight, <\/strong>change the Hint Text<\/strong> to \u201cEnter Maps Image Height here\u201d, change Default<\/strong> to \u201c300<\/strong>\u201d (for phone layout) and \u201c600<\/strong>\u201d (for tablet layout).<\/p>\n

    \u00a0<\/p>\n

    Add the Main Screen<\/h4>\n

    \u00a0<\/p>\n

    Insert <\/strong>> New Screen <\/strong>> Blank layout.<\/strong>
    \nRename<\/strong> the Screen2<\/strong> to MainScreen.<\/strong>
    \nMove <\/strong>the MainScreen <\/strong>Up by clicking on the Move Up <\/strong>icon in the context menu<\/p>\n

    \u00a0<\/p>\n

    \"image\"
    \nInsert <\/strong>> Media<\/strong> > Image <\/strong>control to add a new Image to the screen.<\/p>\n

    \"image\"<\/p>\n

    \u00a0<\/p>\n

    Rename <\/strong>the control from Image1 to imgMapControl. <\/strong>Set the Width <\/strong>to txtImageWidth <\/strong>and Height <\/strong>to txtImageHeight. <\/strong><\/p>\n

    \u00a0<\/p>\n

    Scenario 1: Display a map for a given named location or address<\/h3>\n

    \u00a0<\/p>\n

    Let\u2019s insert a Text input control to enter the location or address for the map: Insert <\/strong>Tab > Text <\/strong>> Text input. Rename <\/strong>the control to txtLocation. <\/strong>Move it to a location in the screen where appropriate.<\/p>\n

    Change Hint Text <\/strong>as \u201cEnter a location or address\u201d and keep Default <\/strong>as an empty string \u201c\u201d or your favorite location \u2013 for e.g. Times Square, New York, Seattle etc…<\/p>\n

    \u00a0<\/p>\n

    For rendering the Map, use the following formula in the Image <\/strong>property of the imgMapControl <\/strong>:<\/p>\n

    \u00a0<\/p>\n

    For Bing Maps Use:<\/strong><\/p>\n

    \"https:\/\/dev.virtualearth.net\/REST\/V1\/Imagery\/Map\/Road\/\" & EncodeUrl(txtLocation.Text) & \"?mapSize=\" & txtImageWidth & \",\" & txtImageHeight & \"&key=\"&txtBingMapsKey.Text<\/pre>\n
    Bing Maps:<\/strong> Refer to the Get a Static Map<\/strong><\/a> article for examples and other parameters.<\/p>\n
    \u00a0<\/p>\n
    For Google Maps Use:<\/strong><\/p>\n
    \"https:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=\" & EncodeUrl(txtLocation.Text) & \"&size=\" & txtImageWidth & \"x\" & txtImageHeight & \"&key=\"&txtGoogleMapsKey.Text<\/pre>\n
    Google Maps: <\/strong>Refer to examples and parameters in the Google Static Maps Developer Guide<\/strong><\/a>.<\/p>\n
    \u00a0<\/p>\n
    Here are the screenshots for the Location: Space Needle, Seattle using Bing Maps:<\/p>\n
    \u00a0<\/p>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    And 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):<\/p>\n
    \u00a0<\/p>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    Playing with some of the options<\/h3>\n
    Changing ImagerySets (Bing Maps) and Map Types (Google Maps):<\/p>\n
    \u00a0<\/p>\n
    Bing Maps<\/strong> supports multiple imagerySets. Lets add a dropdown to see the effect of changing these imagerySets.<\/p>\n
    Insert<\/strong> > Controls <\/strong>> Dropdown <\/strong>to add a dropdown. Rename <\/strong>the control to drpBingImagerySets<\/strong>. Set the Items <\/strong>property to the following:<\/p>\n
    [\"Road\",\"Aerial\", \"AerialWithLabels\", \"AerialWithLabelsOnDemand\", \"CanvasDark\", \"CanvasLight\", \"CanvasGray\"]<\/pre>\n
    \u00a0<\/p>\n
    Change the formula in the Image <\/strong>property of the imgMapControl <\/strong>to include the imagerySet option :<\/p>\n
    \u00a0<\/p>\n
    \"https:\/\/dev.virtualearth.net\/REST\/V1\/Imagery\/Map\/\" & drpBingImagerySets.Selected.Value & \"\/\" & EncodeUrl(txtLocation.Text) & \"?mapSize=\" & txtImageWidth & \",\" & txtImageHeight & \"&key=\"&txtBingMapsKey.Text<\/pre>\n
    \u00a0<\/p>\n
    \"image\"
    \nGoogle Maps <\/strong>supports four types of maptypes. Lets add a dropdown to see the effect of changing these types.<\/p>\n
    Insert<\/strong> > Controls <\/strong>> Dropdown <\/strong>to add a dropdown. Rename <\/strong>the control to drpGoogleMaptypes<\/strong>. Set the Items <\/strong>property to the following:<\/p>\n
    [\"roadmap\",\"terrain\", \"satellite\", \"hybrid\"]<\/pre>\n
    \u00a0<\/p>\n
    Change the formula in the Image <\/strong>property of the imgMapControl <\/strong>to include the maptype option :<\/p>\n
    \u00a0<\/p>\n
    \"https:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=\" & EncodeUrl(txtLocation.Text) & \"&&size=\" & txtImageWidth & \"x\" & txtImageHeight & \"&maptype=\" & drpGoogleMaptypes.Selected.Value & \"&key=\"&txtGoogleMapsKey.Text<\/pre>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    These Map APIs are pretty powerful and I am sure, you will be tempted to try out other options available for customization. For now let\u2019s move on to the next scenario:<\/p>\n
    \u00a0<\/p>\n
    Scenario 2: Display a map for the current GPS location of the device<\/h3>\n
    \u00a0<\/p>\n
    PowerApps provides native access to Device Signals<\/a> such as Location (GPS), Acceleration, Compass, etc. Let\u2019s use the Location<\/a> signal to show the current location on a map.<\/p>\n
    For that, we shall use the same txtLocation Text input to display the GPS coordinates if we select a Toggle to use GPS Location.<\/p>\n
    Insert > Controls > Toggle<\/strong> to insert a Toggle<\/strong> control on the screen. Rename<\/strong> it to tglGPSLocation<\/strong>.<\/p>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    Insert > Label <\/strong>to insert a Label <\/strong>control on the screen. Move it next to the Toggle and rename<\/strong> it to lblGPSLocation<\/strong>. Change the Text to \u201cUse GPS Location:\u201d.<\/p>\n
    \"image\"<\/p>\n
    Change the Default<\/strong> of the txtLocation<\/strong> Input text to this formula:<\/p>\n
    \u00a0<\/p>\n
    If(tglGPSLocation.Value, Location.Latitude & \",\"& Location.Longitude ,\"\")<\/pre>\n
    \u00a0<\/p>\n
    For Bing Maps<\/strong>, change the formula in the Image <\/strong>property of the imgMapControl <\/strong>to include the centerpoint & pushpin options (Note we have to add the zoomLevel as well):<\/p>\n
    \u00a0<\/p>\n
    \"https:\/\/dev.virtualearth.net\/REST\/V1\/Imagery\/Map\/\"&drpBingImagerySets.Selected.Value&\"\/\" & EncodeUrl(txtLocation.Text) & \"\/15?mapSize=\" & txtImageWidth & \",\" & txtImageHeight & \"&pp=\" & txtLocation.Text & \";21;I+am+here&key=\"&txtBingMapsKey.Text<\/pre>\n
    \u00a0<\/p>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    For Google Maps<\/strong>, change the formula in the Image <\/strong>property of the imgMapControl <\/strong>to include the center & markers options (Note we have to add the zoomLevel as well):<\/p>\n
    \u00a0<\/p>\n
    \"https:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=\" & EncodeUrl(txtLocation.Text) & \"&zoom=15&size=\" & txtImageWidth & \"x\" & txtImageHeight & \"&maptype=\" & drpGoogleMaptypes.Selected.Value & \"&markers=color:blue%7Clabel:M%7C\"& EncodeUrl(txtLocation.Text)& \"&key=\"&txtGoogleMapsKey.Text<\/pre>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    Scenario 3: Zoom In \/ Zoom Out using a Slider<\/h3>\n
    \u00a0<\/p>\n
    Moving the final scenario, lets add a Slider <\/strong>control to control the Zoom level. Insert > Controls > Slider<\/strong>. Rename <\/strong>the Slider1<\/strong> to slZoom<\/strong>. Change Default <\/strong>to 15<\/strong>, Min <\/strong>to 1 <\/strong>& Max <\/strong>to 21<\/strong>.<\/p>\n
    \u00a0<\/p>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    Add a Label <\/strong>next to the slider to denote the zoom level. Insert > Label<\/strong>. Rename <\/strong>the Label to lbZoom<\/strong>. Change Text <\/strong>to : “Zoom (1-21):”.<\/p>\n
    \u00a0<\/p>\n
    \"image\"<\/p>\n
    \u00a0<\/p>\n
    For Bing Maps<\/strong>, change the formula in the Image <\/strong>property of the imgMapControl <\/strong>to include the\u00a0 zoomLevel from the slider.<\/p>\n
    \u00a0<\/p>\n
    \"https:\/\/dev.virtualearth.net\/REST\/V1\/Imagery\/Map\/\"&drpBingImagerySets.Selected.Value&\"\/\" & EncodeUrl(txtLocation.Text) & \"\/\"& slZoom.Value &\"?mapSize=\" & txtImageWidth & \",\" & txtImageHeight & \"&pp=\" & txtLocation.Text & \";21;I+am+here&key=\"&txtBingMapsKey.Text<\/pre>\n
    \u00a0<\/p>\n
    For Google Maps<\/strong>, change the formula in the Image <\/strong>property of the imgMapControl <\/strong>to include the\u00a0 zoomLevel from the slider.<\/p>\n
    \u00a0<\/p>\n
    \"https:\/\/maps.googleapis.com\/maps\/api\/staticmap?center=\" & EncodeUrl(txtLocation.Text) & \"&zoom=\"& slZoom.Value & \"&size=\" & txtImageWidth & \"x\" & txtImageHeight & \"&maptype=\" & drpGoogleMaptypes.Selected.Value & \"&markers=color:blue%7Clabel:M%7C\"& EncodeUrl(txtLocation.Text)& \"&key=\"&txtGoogleMapsKey.Text<\/pre>\n
    <\/pre>\n
    Scenario 4: Navigate to the Maps app or Web Page when clicked<\/h3>\n
    Lastly, lets add the navigation step when clicked on the image to open up the respective web page or app.<\/p>\n
    \u00a0<\/p>\n
    For Bing Maps<\/strong>,\u00a0 add the following Formula in the OnSelect <\/strong>for the imgMapControl:<\/strong><\/p>\n
    \u00a0<\/p>\n
    If(tglGPSLocation.Value, Launch(\"bingmaps:?cp=\" & EncodeUrl(Substitute(txtLocation.Text,\",\",\"~\"))&\"&lvl=\"&slZoom.Value), Launch(\"bingmaps:?q=\" & EncodeUrl(txtLocation.Text)&\"&lvl=\"&slZoom.Value))<\/pre>\n
    \u00a0<\/p>\n
    Refer to this article for details: https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/launch-resume\/launch-maps-app<\/a><\/p>\n
    \u00a0<\/p>\n
    For Google Maps<\/strong>, add the following Formula in the OnSelect <\/strong>for the imgMapControl:<\/strong><\/p>\n
    \u00a0<\/p>\n
    Launch(\"http:\/\/maps.google.com\/?q=\"&EncodeUrl(txtLocation.Text))<\/pre>\n
    \u00a0<\/p>\n
    Refer to this article for details: https:\/\/developers.google.com\/maps\/documentation\/urls\/guide<\/a><\/p>\n
    \u00a0<\/p>\n
    Download the Sample App<\/h3>\n
    \u00a0<\/p>\n
    Download the Sample App from here<\/a>. Rename the downloaded zip file to SampleMapsApp.msapp<\/strong> and open using PowerApps Studio. Enjoy !<\/p>\n","protected":false},"excerpt":{"rendered":"
    How to use the PowerApps Image Control and Static Maps API from Bing Maps and Google Maps to render a Map in your app.<\/p>\n","protected":false},"author":100,"featured_media":3638,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[3423],"job-role":[],"product":[3473],"property":[],"topic":[3421],"coauthors":[2098],"class_list":["post-157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","audience-it-professional","content-type-tips-and-guides","product-power-apps","topic-application-modernization"],"yoast_head":"\nDisplaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"How to use the PowerApps Image Control and Static Maps API from Bing Maps and Google Maps to render a Map in your app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/image-control-static-maps-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-18T15:08:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:11:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.png\" \/>\n\t<meta property=\"og:image:width\" content=\"610\" \/>\n\t<meta property=\"og:image:height\" content=\"339\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pratap Ladhani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pratap Ladhani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/\"},\"author\":[{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pratap-ladhani\/\",\"@type\":\"Person\",\"@name\":\"Pratap Ladhani\"}],\"headline\":\"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API\",\"datePublished\":\"2017-10-18T15:08:56+00:00\",\"dateModified\":\"2025-06-11T15:11:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/\"},\"wordCount\":1163,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/\",\"name\":\"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp\",\"datePublished\":\"2017-10-18T15:08:56+00:00\",\"dateModified\":\"2025-06-11T15:11:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp\",\"width\":610,\"height\":339,\"caption\":\"Bing Maps\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/person\/b65835b61629a2fd09f24a46fceb2bff\",\"name\":\"Pratap Ladhani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=gef2fe6828f30df80244cfd43b7ca6b57\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g\",\"caption\":\"Pratap Ladhani\"},\"url\":\"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pladhani\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/","og_locale":"en_US","og_type":"article","og_title":"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API - Microsoft Power Platform Blog","og_description":"How to use the PowerApps Image Control and Static Maps API from Bing Maps and Google Maps to render a Map in your app.","og_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/image-control-static-maps-api\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2017-10-18T15:08:56+00:00","article_modified_time":"2025-06-11T15:11:28+00:00","og_image":[{"width":610,"height":339,"url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.png","type":"image\/png"}],"author":"Pratap Ladhani","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Pratap Ladhani","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#article","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/"},"author":[{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pratap-ladhani\/","@type":"Person","@name":"Pratap Ladhani"}],"headline":"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API","datePublished":"2017-10-18T15:08:56+00:00","dateModified":"2025-06-11T15:11:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/"},"wordCount":1163,"commentCount":0,"publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/","name":"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp","datePublished":"2017-10-18T15:08:56+00:00","dateModified":"2025-06-11T15:11:28+00:00","breadcrumb":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#primaryimage","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp","contentUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2017\/10\/44162776-5e72-45f3-ae21-69889a9fc50e.webp","width":610,"height":339,"caption":"Bing Maps"},{"@type":"BreadcrumbList","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/2017\/10\/18\/image-control-static-maps-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"Displaying a Map using an Image Control in PowerApps and Bing Maps or Google Maps API"}]},{"@type":"WebSite","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#website","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/#\/schema\/person\/b65835b61629a2fd09f24a46fceb2bff","name":"Pratap Ladhani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=gef2fe6828f30df80244cfd43b7ca6b57","url":"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5618b02062e59f576de7da01b4a7df3f64188961e5588a611d8d09b7606c550f?s=96&d=mm&r=g","caption":"Pratap Ladhani"},"url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/author\/pladhani\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=157"}],"version-history":[{"count":1,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions"}],"predecessor-version":[{"id":131174,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/157\/revisions\/131174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media\/3638"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=157"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=157"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=157"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=157"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=157"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=157"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=157"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}