Step By Step integrating Bing Maps in MS CRM 2011

Mahender   November 8, 2011   23 Comments on 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

 

 

Post Views: 1,161

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

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

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

    I believe I used this same script in our CRM and it worked great. the thing though I would like is to take the following line

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

    and get the coordinates to be pasted into a form cell. I tried

    window.parent.Xrm.Page.getAttribute(“new_longitude”).setValue(location);

    and I get a error messaging saying the field only excepts null or string items. I tried making location as another variable such as

    var test = location.tostring();
    window.parent.Xrm.Page.getAttribute(“new_longitude”).setValue(test);

    but then nothing happens. I though this would be something easy to do. But does anybody know how to take this script and inject the longitude and latitude into two fields.

    Reply ↓

  16. Pingback: bing maps jsonp - Search Yours

  17. Pingback: bing maps subscription - Search Yours

Leave a Reply

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