Adding Maps to your CRM Live Page

  • Article

Adding maps to your CRM Live Site is a pretty easy task that will add a nice touch.

The first todo is to build an html page that takes a lat/long value and renders a map. Next, add an IFrame to your form where you want the map. The IFrame should point to an blank html page and in the onload event you'll assign the proper html page that can render the map. The lat and long fields are auto included for you in the CRM schema but not populated. You'll want to add lat & long field attributes to the form.

Here's a sample html page that will serve up maps from MS Virtual Earth. It takes a lat and long value as params.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>">
<html xmlns="<www.w3.org/1999/xhtml>">
<head runat="server">
<title>Virtual Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="</script">dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
<script type="text/javascript">
var map = null;
var qsParm = new Array();

function GetMap()
{

qsParm['Lat'] = null;
qsParm['Long'] = null;
qs();      

            // Get Lat & Long
if (qsParm['lat'] && qsParm['long'])
{
}
else
{
document.write("Missing Lat & Long");
return;
}

map = new VEMap('myMap');
var geolat = qsParm['lat']
var geolong = qsParm['long']
map.SetDashboardSize(VEDashboardSize.Normal);
var latlong = new VELatLong(geolat,geolong);
map.LoadMap(latlong, 20 ,'h' ,false);
map.SetCenterAndZoom(latlong,15);
return;
}

function qs()
{
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++)
{
var pos = parms[i].indexOf('=');
if (pos > 0)
{
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
qsParm[key] = val;
}
}
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style='position:relative; width:400px; height:400px;'></div>
</body>
</html>

Next you'll need some code in the OnLoad event
Add the code to the onclick function for the tab to render properly.
Make sure you change to your tab value;they are zero indexed.
Notice the document.all.IFRAME_Map.src = line. That is the IFrame on my page so I just set the src property to my html page.

crmForm.all.tab2Tab.onclick = function()
{
// Do some GeoCoding later

// For now we assume the user knows the lat & long

if (crmForm.address1_latitude.DataValue && crmForm.address1_longitude.DataValue)
{
var geolat = crmForm.address1_latitude.DataValue;
var geolong = crmForm.address1_longitude.DataValue;
var MapUrl ="<www.yourpage.com/default.htm?lat>=" + geolat + "&long=" + geolong;
document.all.IFRAME_Map.src= MapUrl;
}
else
{
document.all.IFRAME_Map.src= "www.yourpage.com;
alert("Missing GeoData")
}
}

You might want to automatically convert the address to a lat/long value instead of depending on the user to enter the lat/long values. This process of converting an address to a lat long value is called geocoding. You can use mappoint and virtual earth , <msdn2.microsoft.com/en-us/library/bb545004.aspx> to do it but it's a little more involved then the Yahoo service.

<developer.yahoo.com/maps/rest/V1/geocode.html>

Sample Request Url: <local.yahooapis.com/MapsService/V1/geocode?appid=YahooDemo&street=701+First+Street&city=Sunnyvale&state=CA>
The response will look like

<ResultSet xmlns:xsi="www.w3.org/2001/XMLSchema-instance"
xmlns="urn:yahoo:maps"
xsi:schemaLocation="urn:yahoo:maps local.yahooapis.com/MapsService/V1/GeocodeResponse.xsd">
<Result precision="address">
<Latitude>37.416384</Latitude>
<Longitude>-122.024853</Longitude>
<Address>701 FIRST AVE</Address>
<City>SUNNYVALE</City>
<State>CA</State>
<Zip>94089-1019</Zip>
<Country>US</Country>
</Result>
</ResultSet>
So you just need to parse out the lat/long values and pass to your html page

You can read more about using Virtual Earth at 
<dev.live.com/virtualearth/sdk/>