Tuesday, July 24, 2012

Bing Map Integration in CRM 2011


  • First steps is to get Bingmap developers key.
  • Create an html page and use below code (Update the Key in Javascript )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
   <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: "AiglyGRJixW4KFbAwhKz2C6QlXbFxVfePmlKPZLmc3DapzpwEJR-mGXc9go-zk7Y", 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>


  • Create a HTML webresource and upload your html page here
  • Add the HTML Web Resource in your Account Form (//make sure to replace field name in html page if you are using custom field.)
  • Now Save and Publish you Customization 
  • Now Open your Account form and Check .. !




Reference :- Mahender Pal : Step By Step integrating Bing Maps in MS CRM 2011

1 comment: