I have had many people asking me how I built the demo that displays multiple pins on a map from a SharePoint list of locations. http://www.wssdemo.com/Pages/map.aspx

You can do this with SharePoint Designer and the Data View web part. Nothing has to be run on the server as this is a "content" solution.

This demo was based on some examples from the SharePoint Designer blog but the problem is that the Virtual Earth API's have been updated since these articles were written.

So, here are some instructions that will hopefully get you up and running quickly.

Assuming that you have a list with Title and Description fields that includes 2 additional fields called "Lat" and "Long", create a web part page in SharePoint Designer and add a Data View of the list containing the locations. Here is the raw list from my demo http://www.wssdemo.com/Lists/Location/AllItems.aspx

Add the following script and html to the page above the data view web part

<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"> </script>

<script type="text/javascript">

var map = null;

// Loads the Virtual Earth map control

function GetMap()

{

map = new VEMap('myMap');

map.LoadMap(new VELatLong(0,0), 1,'r' ,false);

AddPins();

}

// Places a pushpin on the map using the parameters given, iconurl is ignored

function AddPin(lat, lon, iconurl, title, desc)

{

var shape =

new VEShape(VEShapeType.Pushpin,

new VELatLong(lat,lon));

shape.SetTitle(title);

shape.SetDescription(desc);

map.AddShape(shape);

}

// Programmatically adds func as a handler for the onload event

// This method has been used by many developers, but the code is

// via the ViaVirtualEarth Wiki

// http://www.viavirtualearth.com/Wiki/Load+VE+control+without+body+onload.ashx.

function addLoadEvent(func)

{

var oldonload = window.onload;

if (typeof window.onload != 'function')

{ window.onload = func; }

else

{ window.onload = function()

{ oldonload(); func(); }

}

}

addLoadEvent(GetMap);

</script>

<div id='myMap' style="width:800px; height:600px;"></div>

 

Add the following XSL template section to the Data View web part

<xsl:template name="AddMapPins">

<xsl:param name="Rows"/>

<xsl:text disable-output-escaping="yes"><![CDATA[

<script type="text/javascript">

function AddPins()

{

]]></xsl:text>

<xsl:for-each select="$Rows">

<xsl:if test="not(normalize-space(@Lat) = '' and normalize-space(@Long) = '')">

AddPin(<xsl:value-of select="@Lat" />,

<xsl:value-of select="@Long" />,

null,

"<xsl:value-of select="@Title" />",

"<xsl:value-of select="@Description"/>");

</xsl:if>

</xsl:for-each>

<xsl:text disable-output-escaping="yes"><![CDATA[

}

</script>

]]></xsl:text>

</xsl:template>

 

Find the following code in the Data View

    <xsl:template name="dvt_1">

        <xsl:variable name="dvt_StyleName">Table</xsl:variable>

        <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>

 

And insert the following immediately after

<xsl:call-template name="AddMapPins">

    <xsl:with-param name="Rows" select="$Rows"/>

</xsl:call-template>