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”>

<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>

 

      <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/” + 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

 

 

22 thoughts on “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

    Reply
  2. Full Size Sheets

    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.

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

  4. abdul

    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

    Reply
  5. 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.

    Reply
    1. mahenderpal Post author

      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.

      Reply
  6. 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 });

    Reply
  7. 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

    Reply
  8. 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.

    Reply
  9. Pingback: bing maps jsonp - Search Yours

  10. Pingback: bing maps subscription - Search Yours

Leave a Reply

Your email address will not be published. Required fields are marked *