Dec

19

Integrating Salesforce.com with MS Live Maps

Filed Under salesforce 

Yesterday I was creating a simple salesforce demo for one of our prospective clients. At the end of the day I decided it would be cool to show a google or live map of the account’s billing address. While it wasn’t really hard to put it together, it wasn’t also something that you could do with embedding a link in an S-Control.

Here’s are the steps:

  1. Create a new S-Control.
  2. Insert the code below into the S-Control.
  3. Change the Account layout page to include the SControl. I have mine at a 800 pixels wide so its better to create a single column section below the address (see the screen shots).
  4. Done!

I hope this helps someone :-).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Live Map
</title>
<script charset="UTF-8" type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&amp;amp;amp;amp;amp;mkt=en-us">
</script>
</head>
<body>
<div id='myMap' style="position:absolute; width:800px; height:400px;"></div>

<script type="text/javascript">
//<![CDATA[
function getLatLong(layer, resultsArray, places, hasMore, veErrorMessage)
{
var ll = places[0].LatLong;
AddPin(ll);
map.SetCenter(ll);

}

function AddPin(ll)
{
pin = new VEShape(VEShapeType.Pushpin,ll);
layer.AddShape(pin);
map.FindLocations(ll,null);
}

var map = new VEMap('myMap');
var layer = null;

map.SetDashboardSize(VEDashboardSize.Small);

map.LoadMap();
layer = new VEShapeLayer();
map.AddShapeLayer(layer);

var address = "{!Account.BillingStreet}" +
"{!Account.BillingCity}"   +
"{!Account.BillingPostalCode}" +
"{!Account.BillingCountry}";
map.Find(null, address, null, null, null, null, null, null, null,null, getLatLong);

//]]>
</script>
</body>
</html>

Here are some screen shots of the results:



Comments

Leave a Reply