Step By Step integrating Bing Maps in MS CRM 2011


In this post I am going to show, how easily we can integration bingmap in MS CRM 2011. I am going to create a html webresource which will show account’s city location on bing maps based on city address.

Here are the steps to implement the same

  1. First steps is to get Bingmap developers key.
  2. Create an html page and use below code in this page and save that page. (you can put this page in intpub location and can test this in your browser, in that case you need to hardcode city value).

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html>

   <head>

      <title></title>

      <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

 

      <script type=”text/javascript” src=”http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0″></script&gt;

 

      <script type=”text/javascript”>

 

          var map = null;

 

          function GetMap() {

              // Initialize the map

             map = new Microsoft.Maps.Map(document.getElementById(“mapDiv”), { credentials: “Your BingMap Key”, mapTypeId: Microsoft.Maps.MapTypeId.road });

 

          }

 

          function ClickGeocode(credentials) {

              map.getCredentials(MakeGeocodeRequest);

          }

 

          function MakeGeocodeRequest(credentials) {

            //Get City value from MS CRM account’s form

              var geocodeRequest = “http://dev.virtualearth.net/REST/v1/Locations/&#8221; + window.parent.Xrm.Page.getAttribute(‘address1_city’).getValue() + “?output=json&jsonp=GeocodeCallback&key=” + credentials; //make sure to replace field name if you are using custom field.

              CallRestService(geocodeRequest);

          }

 

          function GeocodeCallback(result) {

                   if (result &&

                   result.resourceSets &&

                   result.resourceSets.length > 0 &&

                   result.resourceSets[0].resources &&

                   result.resourceSets[0].resources.length > 0) {

                  // Set the map view using the returned bounding box

                  var bbox = result.resourceSets[0].resources[0].bbox;

                  var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));

                  map.setView({ bounds: viewBoundaries });

 

                  var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);

                  var pushpin = new Microsoft.Maps.Pushpin(location);

                  map.entities.push(pushpin);

              }

          }

 

          function CallRestService(request) {

             var script = document.createElement(“script”);

              script.setAttribute(“type”, “text/javascript”);

              script.setAttribute(“src”, request);

              document.body.appendChild(script);

          }

 

      </script>

   </head>

   <body onload=”GetMap();ClickGeocode();”>

      <div id=’mapDiv’ style=”position:relative; width:400px; height:400px;”></div>

   </body>

</html>

 

3.  Create a HTML webresource and upload your html page here.

4. Open account form and Create a new Tab let’s say Accountlocation.

5. Add a new webresource and browse your webresource from web resource lookup.

 

6. Save and publish your form.

7. Open any account record and check for Account location tab.

Enjoy !!!

Reference : Bing Maps SDK

 

 

Advertisements

20 Comments

Filed under MS CRM 2011, Step By Step MS CRM 2011

20 responses to “Step By Step integrating Bing Maps in MS CRM 2011

  1. Shivam CRM

    Hi Mahender,

    I been trying your solution from many day, Howsoever, i am not able to produce the output. I think there is some problem with the HTML code you have provided. Tried to hard code the link according to your method but still i am unable to open the page in to normal browser.

    Regards,
    Shivam Dixit

  2. I will right away grasp your rss feed as I can’t to find your email subscription hyperlink or newsletter service. Do you’ve any? Please permit me know in order that I may subscribe. Thanks.

  3. Goodbrat

    Great Job !!
    It worked perfectly for me and deploying it was a cake-walk 🙂
    Thanks !!

  4. Pingback: Bing Maps & Microsoft Dynamics CRM 2011 « Ricky's Bing Maps Blog

  5. Superb .easy way.
    it worked as per desire . initially it was giving error in double quote, just paste this code in any html editor or VS .so u can see double quote error

  6. mohsinkhan

    HI, I am getting error that in line 9 char 14, i.e Microsoft is undefined.
    and also an error in line 42 char 1,i.e object does not support this property or method.
    Help me out in solving the problem.

    • mahenderpal

      Please make sure you are using correct quotation in code, I am trying to find solution why my post have wrong quotes in wordpress.
      let me know.

  7. mohsinkhan

    Quotes is not an issue. Error says Microsoft is undefined in line 9. i.e
    map = new Microsoft.Maps.Map(document.getElementById(“mapDiv”), { credentials: “Your BingMap Key”, mapTypeId: Microsoft.Maps.MapTypeId.road });

  8. mohsinkhan

    HI mahender, I am getting the same error as i posted earlier ,that in line 9 char 14, i.e Microsoft is undefined.
    and also an error in line 42 char 1,i.e object does not support this property or method.
    Help me out

  9. mohsinkhan

    Hi mahender , here is the code below

    var map = null;

    function GetMap() {

    // Initialize the map

    map = new Microsoft.Maps.Map(document.getElementById(“mapDiv”), { credentials: “AozDTOD-FgMcyK0-F4jrSNLQ2poNTjC-ykPrk9nOT4Be8oWQgbBftgMTRoOeTukI”, mapTypeId: Microsoft.Maps.MapTypeId.road });

    }

    function ClickGeocode(credentials) {

    map.getCredentials(MakeGeocodeRequest);

    }

    function MakeGeocodeRequest(credentials) {

    //Get City value from MS CRM account’s form

    var geocodeRequest = “http://dev.virtualearth.net/REST/v1/Locations/” + window.parent.Xrm.Page.getAttribute(‘address1_city’).getValue() + “?output=json&jsonp=GeocodeCallback&key=” + credentials; //make sure to replace field name if you are using custom field.

    CallRestService(geocodeRequest);

    }

    function GeocodeCallback(result) {

    if (result &&

    result.resourceSets &&

    result.resourceSets.length > 0 &&

    result.resourceSets[0].resources &&

    result.resourceSets[0].resources.length > 0) {

    // Set the map view using the returned bounding box

    var bbox = result.resourceSets[0].resources[0].bbox;

    var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));

    map.setView({ bounds: viewBoundaries });

    var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);

    var pushpin = new Microsoft.Maps.Pushpin(location);

    map.entities.push(pushpin);

    }

    }

    function CallRestService(request) {

    var script = document.createElement(“script”);

    script.setAttribute(“type”, “text/javascript”);

    script.setAttribute(“src”, request);

    document.body.appendChild(script);

    }

    Please do reply for this.

  10. Ashish

    ‘Microsoft’ is undefined
    i got same error, missing some parameters

  11. I got the same error ‘Microsoft’ is undefined.

    Also tried original sample from BingMap SDK: http://msdn.microsoft.com/en-us/library/gg427601.aspx

    This example also getting the same error. Looks like some issue with BingMaps. I tried with CRM 2011 online with UR12.

  12. Waqar

    Can you please tell me how to add multiple push pins in this map ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s