Integrating Bing Maps with Salesforce.com

Recently I had a customer ask how to add Bing Maps to their Salesforce.com solution. I regularly work with developers who are integrating Bing Maps into Microsoft Dynamic CRM, but this was the first request I’ve had for Salesforce.com in a while. In this blog post we are going to see just how easy it is to integrate Bing Maps into a Salesforce.com solution.

It might seem strange to some readers that we are blogging about using Bing Maps on a non-Microsoft platform like Salesforce, but it is a new Microsoft and our services can be used anywhere. In fact Microsoft and Salesforce.com made an announcement earlier this year around joint solutions that they are working on with Windows, Office and Power PI. There is also a good video on the Power BI blog on using Salesforce.com data with Power Query in Excel.

Adding Bing Maps to the Account page

The first step is to go to the Getting Started page of the Salesforce developer site. On this page is a button to get started for free. This will allow you to create a development environment for Salesforce. Once you have done this you can start developing with Salesforce. Currently there is no data in the developer environment, so we will start off by adding an account. To do this click on the Accounts tab at the top of the page, and then press the New button next to the Recent Accounts section.

clip_image002[7]

Screenshot: Salesforce Accounts page

We will create an account for Microsoft UK for testing purposes and will fill in the billing address information as follows:

  • Billing Street: 100 Victoria Street
  • Billing City: London
  • Billing Zip/Postal Code: SW1E 5JL
  • Billing Country: UK

When we are done we will press the Save button.

clip_image004[4]

Screenshot: New Salesforce Account Page

This should now take you back to the Accounts page and you should see this newly created account under the Recent Accounts section of the page. If you click on the account name it should open up a page with all the details for that account. We will update this page so that Bing Maps shows up under the billing address information with a pushpin showing the address. To do this, when viewing an account, open the Developer console by clicking the little arrow next to your name at the top of the page.

clip_image006[4]

Screenshot: Link to Developers Console

This will open a new window where you can add some code to be rendered in the page. Press File -> New -> Visualforce Page and call it BingMapsAccount. This will create a new empty page and look something like this:

clip_image008[4]

Screenshot: Developer Console

If you don’t see the code for the standard controller, add it in. This gives you access to the fields in the account page. To use the data from the fields in the account page we can add place holders in our JavaScript like this:

{!Account.BillingStreet}

When the page is rendered, Salesforce will fill in the place holder with the value from the account page. We can add HTML and JavaScript between the apex:page tags to create our Visualforce page. Since users will almost always be logged into a secure site we will have to make sure that any references to external resources, like the Bing Maps API, uses HTTPS. Our page will be simple and consist of a just a map. When the page loads it will use the billing address fields to build up a string address to geocode. The map will then be loaded, and the address geocoded using the Bing Maps search module and a pushpin is displayed on the location. If there is no address information the map is not displayed. All of this can be done using the following code:

<apex:page standardcontroller="Account">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
        <script type="text/javascript">
            window.onload = function () {
                var searchManager = null;

                var street = '{!Account.BillingStreet}';
                var city = '{!Account.BillingCity}';
                var state = '{!Account.BillingState}';
                var postalCode = '{!Account.BillingPostalCode}';
                var country = '{!Account.BillingCountry}';

                var address = '';
                if (street && street != '') {
                    address += street + ', ';
                }

                if (city && city != '') {
                    address += city + ', ';
                }

                if (state && state != '') {
                    address += state + ', ';
                }

                if (postalCode && postalCode != '') {
                    address += postalCode + ', ';
                }

                if (country && country != '') {
                    address += country;
                }

                //Only load map if the account has billing address information
                if (address.length > 0) {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'YOUR_BING_MAPS_KEY',
                        zoom: 15
                    });

                    //Load Search Module and geocode data
                    Microsoft.Maps.loadModule('Microsoft.Maps.Search', { callback: geocodeRequest });

                    function geocodeRequest() {
                        if (searchManager == null) {
                            searchManager = new Microsoft.Maps.Search.SearchManager(map);
                        }

                        var request =
                        {
                            where: address,
                            count: 1,
                            callback: function (r) {
                                if (r &&
                                r.results &&
                                r.results.length > 0) {
                                    var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
                                    map.entities.push(pin);

                                    map.setView({ center: r.results[0].location });
                                }
                            },
                            errorCallback: function () {
                                alert("{!Account.Name}'s billing address could not be found");
                            }
                        };

                        searchManager.geocode(request);
                    }
                } else {
                    //Hide the map div
                    document.getElementById('myMap').style.display = 'none';
                }
            };
        </script>
        <style>
            #myMap {
                position: relative;
                width: 100%;
                height: 250px;
            }
        </style>
    </head>
    <body>
        <div id="myMap"></div>
    </body>
</apex:page>

 

Be sure to set the map credentials with your Bing Maps key where it says YOUR_BING_MAPS_KEY, otherwise the map will have an error message overlaid on top of it and the search module will be unable to geocode the billing address. Once you have updated the BingMapsAccounts.vfp page with this code, save the file by going to File -> Save. If you now go to the Account page for the Microsoft UK account we created you will notice that the map does not appear. To fix this press the Edit Layout button.

clip_image010[4]

Screenshot: Edit Layout button on Account page

In the panel that appears, select Visualforce page, and drag and drop the BingMapsAccounts page so that it is under the billing address. Press the Save button when you are done. The account page should update and now include a map under the billing address information like this:

clip_image011[4]

Screenshot: Bing Maps showing Billing Address information

We have now integrated Bing Maps into the account page. You can create similar map pages for the contact and lead pages. You will need to change the standard controller and the address fields being referenced. Here is a table with the information available for the Contact and Lead pages.

  Contact Page Lead Page
Standard Controller Contact Lead
Street Contact.MailingStreet Lead.Street
City Contact.MailingCity Lead.City
State/Province Contact.MailingState Lead.State
Zip/Postal Code Contact.MailingPostalCode Lead.PostalCode
Country Contact.MailingCountry Lead.Country

Taking things further

In this blog post we have seen how to add Bing Maps at an account page and how to add a custom field to the accounts page to store the coordinates of the billing address. Bing Maps is easy to integrate into web based technologies such Salesforce.com. Salesforce.com has a lot of similarities to Microsoft Dynamics CRM and a lot of the code samples we have created for Dynamic CRM can be easily migrated to work in Salesforce.com. Here are some blog posts on Bing Maps and Dynamics CRM which may give you some additional ideas of how to use Bing Maps in Salesforce.com.

– Ricky Brundritt, Bing Maps Program Manager