Following on from a previous post, here is the code to plot Microsoft Dynamics CRM 2011 records using Bing Maps:
<!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>REST JQuery Map</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
<script src="../ClientGlobalContext.js.aspx"></script>
<script src="Scripts/jquery1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/RESTJQueryMap.js" type="text/javascript"></script>
</head>
<body style="border-width:0px;padding-left:0px;padding-top:0px;margin-left:0px;margin-top:0px;margin-bottom:0px;margin-right:0px">
<div id="map" style="position:relative; width:650px; height:450px;"></div>
<script language="javascript" type="text/javascript">
// <![CDATA[
//Create a new Bing Map
var map = null;
var results = null;
map = new VEMap('map');
map.SetCredentials("***KEY***");
//Search CRM records
function Search() {
//Search London
retrieveMultiple("AccountSet", "?$filter=substringof('London',Address1_City)", SearchCompleted, null);
}
//Callback - Search Success
function SearchCompleted(data, textStatus, XmlHttpRequest) {
//Display Map
map.LoadMap();
//map.LoadMap(new VELatLong(50.6, -0.3, 0, VEAltitudeMode.RelativeToGround), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
//Plot CRM Accounts on the map
if (data && data.length > 0) {
for (var i = 0; i < data.length; i++) {
//Get Location of CRM Record and plot on map
var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations/" + data[i].Address1_PostalCode + "?output=json&jsonp=GeocodeCallback&key=***KEY***";
CallRestService(geocodeRequest);
}
}
map.SetCenterAndZoom(new VELatLong(51.51, -0.11), 13);
}
function GeocodeCallback(result) {
//alert("Found location: " + result.resourceSets[0].resources[0].name);
if (result && result.resourceSets && result.resourceSets.length > 0 && result.resourceSets[0].resources && result.resourceSets[0].resources.length > 0) {
// Add a pushpin at the found location
var latlong = new VELatLong(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
var pushpin = new VEShape(VEShapeType.Pushpin, latlong);
map.AddShape(pushpin);
}
}
function CallRestService(request) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", request);
document.body.appendChild(script);
}
window.onload = Search;
// ]]>
</script>
</body>
</html>
This sample also uses the Bing Maps REST Locations API to return longitude and latitude data for a given address!
You will need to replace ***KEY*** with your own Bing Maps API key. You can create a new developer account the following URL:
http://www.bingmapsportal.com/
How does the REST API return the longitude and latitude data?
ReplyDeleteIt needs more resources as I see mention of jquery? and besides that I tried and I get all white and only the scroll bar
ReplyDeleteHI,
ReplyDeleteThanks for the post, just added you code here in my web resources with my bing may key but it does not display anything on my dashboard. It does not display even any error that i can tell you here, so can you tell me what's the problem??? Thanks