Rajeev Pentyala – Microsoft Power Platform

In this article lets understand the basics of ‘Bing Maps‘ connector to locate the addresses in Canvas App.

Prerequisites:

• Subscribe to Dynamics 30 days trial and get Office 365 account.
• Connect to Power Apps maker portal using Office 365 account to build the Canvas App.
• Bing Map API Key

How to get Bing Map API Key:

• Connect to Bing Maps Portal
• ‘Sign In’ using either ‘Microsoft Account’ or ‘Enterprise Azure Active Directory account’.

• Go to ‘My account -> My Keys’ and create a new key. (Steps to create new key)
• Copy the Key which we gonna use in next steps.

Adding ‘Bing Maps’ connector to Canvas App:

• Create a new Canvas App.
• Add a ‘Bing Maps’ connector.
• Provide the ‘API Key’ captured previously.

Locate address using ‘Bings Maps’ connector:

• For better understanding, I added below controls to my Canvas app’s screen.
  • 3 Text box controls to capture address
  • An Image control which loads the map
  • A Button to load the map.
• On Button ‘OnSelect’, Declare a global variable ‘varAddress‘ and use BingMaps.GetLocationByAddress API to convert the address to coordinates (i.e., Latitude and Longitude).

  • Set(
    varAddress,
    BingMaps.GetLocationByAddress(
    {
    addressLine: txtAddress1.Text,
    locality: txtAddress2.Text,
    postalCode: txtZip.Text
    }
    )
    );

• Now use the coordinates from ‘varAddress‘ variable and load the map in Image control.
• Set ‘Image’ property to BingMaps.GetMap() by setting coordinates from ‘varAddress’.

  • BingMaps.GetMap(
    “AerialWithLabels”,
    15,
    varAddress.point.coordinates.latitude,
    varAddress.point.coordinates.longitude)

• Run the App and you should see the address located in Map.

• You can also show a ‘Push Pin’ using ‘pushpin’ property. You need to pass coordinates as below.

  • BingMaps.GetMap(
    “AerialWithLabels”,
    15,
    varAddress.point.coordinates.latitude,
    varAddress.point.coordinates.longitude,{pushpin:varAddress.point.coordinates.latitude&”,”&varAddress.point.coordinates.longitude}
    )

🙂