November 8, 2011 · 9:54 am
↓ Jump to Comments

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

 

 

Advertisement

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
    November 21, 2011 at 9:59 am

    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
    April 12, 2012 at 8:28 am

    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. Goodbrat
    April 12, 2012 at 8:33 am

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

    Reply

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

  5. abdul
    July 5, 2012 at 12:49 pm

    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
  6. mohsinkhan
    July 27, 2012 at 7:09 am

    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
    • mahenderpal
      July 27, 2012 at 9:27 am

      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
  7. mohsinkhan
    July 27, 2012 at 10:23 am

    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
  8. mohsinkhan
    July 31, 2012 at 11:12 am

    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
  9. mohsinkhan
    August 3, 2012 at 6:54 am

    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
  10. Ashish
    January 3, 2013 at 10:06 am

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

    Reply
  11. Guru Prasad
    March 15, 2013 at 12:49 pm

    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.

    Reply
  14. Waqar
    December 19, 2014 at 11:13 am

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

    Reply

Leave a Reply

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

Gravatar
WordPress.com Logo

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

Facebook photo

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

Cancel

Connecting to %s