Integrating Bing Maps into Power Apps

Have you ever thought about integrating a GPS component into your app? You can do this with Power Apps and in this post, I’ll show you how to create an application with Power Apps that uses Bing Maps to give your users a dynamic maps system that uses your GPS.

In my last post I built a Salesforce.com application for a sales manager who was looking to be able to see where an account is located when looking at it in Salesforce so she could drive there. We can do this with Google or Bing Maps; in this case I’ll be using Bing Maps for the ease of use of its API.

• To begin, I’ll go back to the app I created where I can select a given account from Salesforce. The app lists the account information and a list of contacts for that account. The empty space on the top right side of my app is where I’ll add my map.
• Before I add that map, let’s look at the metadata you can get out of your GPS on your phone or laptop.
  • At the top of my desktop page, there is an icon that shows that this page is tracking my location. You and your users will have to give permission for this.
  • I’ll insert a few labels to see what kind of information we are tracking. Then in the code bar I’ll add location.longitude for one label and location.latitude for the other to give access to the phone’s longitude and latitude.
  • I suggest you try to do this before anything else to confirm that you have permissions to have access to the phone’s GPS device. If you get back a blank or nothing in your label, that will tell you the customer has not given permissions to go forward with this.
• In my case, I’ll use the address/billing address for the Pragmatic Works account in Florida. I’ll use the GPS device to create a simple map.
• To use the Bing Maps connector, go up to View, Data Sources and add the Bing Maps connector. To create a new connector to Bing Maps, I’ll first need to know the API key.
  • To access that API key go to: https://www.bing.com/partners/developers#MapsAPIs where you’ll find descriptions of code and to the API section at Bing. Here you’ll fill out a quick form and immediately get back an API key to copy/paste into the connector in your app. Then just hit create.
• Bing Maps can do a number of things for us like: create routes from Point A to Point B; the most efficient trucking routes; it can put push pins on a map in numerous locations; or just put the map on it as I want to do in my app today.
• Next, I’ll go up to Insert, then Media and select Image. I then want to fit that image inside the blank space of my app where I have my labels and where I want my map to go.
• To create a bit more wiggle room, I type Bing Maps into the code bar, and it will find the Get Map function. It will ask us what kind of map we want; I’ll choose the Aerial with Labels which will give a satellite view of the map and I’ll pass in the longitude and latitude.
• It will also ask what zoom level we want, typically 0-20. I’ll go with 15 in this case and I add longitude and latitude. (Watch the video included here for more detail on any code I enter throughout this app build.)
• To be sure my map fills in the area in the app I want it to, I go over to Image box on the right and change the image position from fit to fill, as well as other properties we can change.
• I want to see my Open Salesforce button which is now blocked by the map, so I click on the Home button and click on Reorder so I can send the map to the back.
• The ‘My Location’ that you’ll see is based on your phone device when using this app on your phone. For this demo I’m using this on my laptop, so the map is ‘guesstimating’ based on my IP address or my laptop’s GPS.
• My next step is to tie this map into the company’s address that I have open on the left side of my app. To pass in this address, I’ll need the latitude and longitude.
• To do this I’ll need to add a variable and then I will create a global variable. Start by going to the detail page of my app and select Actions and On Visible. Our goal is to pass the address in and get the lat/long back and Bing Maps has a great service for this. (Again, see how to set up the code for this in the video by passing in things like address line from that gallery, billing street/city, postal code and the locality.)
• I create this variable so whenever this form opens, it will pass all this information and we’ll now have the lat/long for the address using the Bing function. This variable will change for whatever company you’re viewing at any given time.
• Once I’ve set that up I want to take out my address and put in the address of the company's location by putting in varLocation.point.coordinates.latitude and do the same for longitude. You’ll have to play around a bit to get the right level of zoom level that works for your data with this size map.
• A common question is how do I put a pushpin on that location on the map? There are some extra properties we need. I then go back into my code bar and hit comma, now I can see those additional properties come up. One of those is pushpin.
• I add pushpin after my comma and it will require a few additional things passed inside of this, mainly the lat/long of the office location where you want that push pin to go on your app. You could also add a bunch of different push pins on top of that map to show the customers around the pushpin marking your location. I will show how to do this in a later post.
• With the Bing pushpins property, there are properties you can use to control the pushpin experience and there are 100s of pushpin icons you can use (pins, flags, etc.). Follow this link to see pushpin syntax and icon styles: https://docs.microsoft.com/en-us/bingmaps/rest-services/common-parameters-and-types/pushpin-syntax-and-icon-styles?redirectedfrom=MSDN. I play around with the styling of my pushpin experience in my video.

One of the things my sales manager wanted to do with this app is to see a push pin of where she is currently located on the map and pushpins showing what other customers are around her at that time. A great way for a sales rep to map out their day no matter where they are. Bing Maps also can show routes of how to get to these customers from where the sales rep is located. I’ll show how to do this in a later post.

If you’d like to learn more Power Apps, we offer on-demand, virtual and live trainings from courses to boot camps to help you learn what you need. Want us to develop an app for you? With our Shared Development offering we’ll work with you to prioritize the apps you need and build the apps for you. All at a fraction of what it would cost for a full-time developer. Click below to learn more.