Step By Step integrating Bing Maps in MS CRM 2011

Views (5498)

Mahendar Pal

45,095

Like(0)

Report

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

First steps is to get Bingmap developers key.
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>

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>