Friday, September 21, 2012

Integrate Bing Map in MS CRM 2011

we need to integrate the map to make life easier in now a days...
like we use mobile not to lost ourself anywhere,...
same in ms crm e can use to make productivity and easy to find a location etc...
here is a very well described link
http://blogs.msdn.com/b/crm/archive/2011/05/27/title-integrating-mapping-with-microsoft-dynamics-crm-2011.aspx

but how integrate it in MS CRM, i will just follow step by step here how to integrate.
before that you need to get the Bing key (license key) to use the bing map and from where you are trying to use that, it must be connected to internet...

1. to get the key please follow the link here...
https://www.bingmapsportal.com/application/Index/142233?status=Created
you can use ur live id to log in, if you have else register to get an id

2.Create an HTML file and upload as Webresource
in the file put the below code...

3. now add the weresource in the Account form ...
then create a record by entering the address1_city value.
once it will be loaded, it will render the address properly...
<!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 Bingmap = null;
          function GetBingMap() {
              // Initialize the Bingmap
              Bingmap = new Microsoft.Maps.Map(document.getElementById("BingmapDiv"), { credentials: "Use the key you got after registration", mapTypeId: Microsoft.Maps.MapTypeId.road });
          }
          function ClickGeocode(credentials) {
              Bingmap.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.
              //here i have used the hardcode value for Singapore
              var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" + "Singapore" + "?output=json&jsonp=GeocodeCallback&key=" + credentials;
              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 Bingmap 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]));
                  Bingmap.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);
                  Bingmap.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="GetBingMap();ClickGeocode();">
      <div id="BingmapDiv" style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

 
more on this also you can render, like take the full address and pass to Bing...
 
Regards,
Sudhanshu

2 comments:

  1. Hello,
    I followed link https://www.bingmapsportal.com/application/Index/142233?status=Created
    and I have got following error:

    You are not authorized to access the requested resource.
    Requested Resource: /application/Index/142233

    Could you please help to solve this issue?

    ReplyDelete
  2. did you cerate the key properly and using as authorised?

    ReplyDelete