The evolution of maps has changed the way individuals explore the world. The transition from inaccurate physical maps to highly accurate digital maps has been mind boggling. It has also changed the way businesses are reaching out to their customers. To ensure growth, most businesses are employing CRMs, such as Microsoft Dynamics 365. Such tools have enabled businesses with improved sales, service, marketing and higher revenue generation. Taking a leap further, commercial organizations are now integrating the power of Bing Maps with the versatile Dynamics CRM to scale new heights of success.
Custom POI hosting, search, batch geocoding, and truck routing are some of the exclusive features that Bing Maps offers. Integrating your CRM with Bing Maps is really pocket friendly. If you use the Bing Map’s tools for development and testing only, it allows you to make 125000 billable calls in a year. Similarly, if the users integrates Bing Maps in Windows application, they get 50000 calls a day for education or Non-Profit usage. Similarly, if the users integrate Bing Maps in Windows application, they get 50000 calls a day for education or Non-Profit usage.
Businesses can use session IDs with Bing Maps HTML5 Web Control to make 25 free calls in one session. Beyond this, the enterprise license charges are based on the number of API calls teams make rather than varying by which APIs we call.
After turning on Bing Maps feature into Power Platform, open make.powerapps.com and you will notice the Bing Maps icon on top navigation bar inside Insert option.
Simply search- Bing Maps API Basic key for free onto any browser or just paste below-mentioned URL into your browser:
We will see this option which is Start for Free
And you will be navigated to this page. Click on Get a free Basic Key option.
Click on My Account dropdown and you will see My Keys option. Click on it and you will be directed to Bing Maps API key. Copy and paste the key and store it in your records for future references.
After getting the Bing Maps API key as a prerequisite, you need to move forward with further steps, such as Autocomplete Address field and Distance Calculation between two addresses.
Open any code editor where you can write above language code. We usually prefer VS Code.
Step 2: Copy and paste this code into your editor. We will go through the code section by section.
Step 3: In this section, we will go through the HTML code.
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
font-family: ‘Segoe UI’, Helvetica, Arial, Sans-Serif
Here, you are creating normal HTML page section. You are also required to add title and inline CSS formatting for your body section. This can be done by adjusting margins, padding and font style.
Step 4: In this section we will go through the search field code.
In first div tag, with printoutpanel as id will act as panel in our form.
In second div tag, with searchBoxContainer as id, you will create search field with searchBox as id, where user will be able to input address.
As soon as the user starts typing an address, the Bing Maps API will display address suggestions.
Step 5: Let’s go deep into below section of important codes:
In this line of code, we are passing the web resource name, which we created before with the above line of code.
var wrControl = formContext.getControl(“WebResource_ourWebResourceName”);
The address search web resource which we created earlier you will pass as execution context on load of the form.
window._formContext = formContext;
You will create global variable named _formContext. This variable can be used anywhere in our address search web resource also inside any method with which we can access or set values to any CRM fields.
Step 6: Let’s split code function by function to get deep insights of code.
LoadMapScenario function is the callback function which is assigned to callback property in script tag where we are calling BingMaps API with its key.
There is built-in API function called AutoSuggest provided by Microsoft.Maps API.
Inside this function, you are assigning callback property with onload function. This onload function will be our first function which will be executed after loadMapScenario function in our web resource.
There is another property named errorCallback which suggests you to define error function in code i.e. onError.
Any exception occurred during web resource execution will be handled by onError function and error message will be displayed to user on the screen.
In the onload function, we are defining maxResults parameter as 5 which can be changed to any number as per requirement.
This property will display 5 address suggestions to the user in search box container.
You will create variable named manager of AutosuggestManager class type by passing options as parameter.
There is inbuilt function i.e. attachAutoSuggest which takes three parameters as input.
First parameter is searchBox which is the ID of input field basically search field where user can type address. Second parameter is searchBoxContainer which is the ID of div tag i.e. container where address suggestions will be displayed.
Last parameter selectedSuggestion is the function name where you will write your code to perform necessary operations as per your requirement. Such as displaying specific address fields onto screen setting CRM fields with the address choosen by user.
In the selected Suggestion function, we are getting parameter as suggestionResult from AutoSuggestManager API, which contains a collection of all the fields that you want to display.
The Address API of Bing Maps contains Address Line, Locality, Admin, District, Postal Code, Country, Region, which contains street address, city, state, postal code & country values respectively.
Also using _formContext global variable, you would need to set CRM field values with the suggestion parameter values, which user clicks while suggestions are populated. Provide logical names of CRM fields over “crm-streetfield”.
The main step is to provide your Bing Maps API Key in the section highlighted above.
Step 8: The final step is to insert your web resource into the section where you want to place your form by making an entry into make.powerapps navbar. Find the Insert option and then click on WebResource.
In this blog we went through Bing Maps API Integration steps into our Dynamics 365 CRM application and easily integrated Auto Suggestion with just few lines of code.