Build a Composite Application and Integrate Google Maps with SharePoint data

One of the great new capabilities of SharePoint 2010 is the amount of disparate information and services you can pull together to build mash up applications or Composites as Microsoft calls them.

In this post I’ll show you how to integrate a SharePoint list with Google maps to provide real-time mapping of records stored in SharePoint. If you prefer to use other mapping services you can, the principal is just the same.

In this example we’ll use out of the box web parts and a zero code approach, (if you count XSL as non-code). The example uses a SharePoint list, two web part views of the list and an XSLT file uploaded to SharePoint. The XSL file I use in this example can be seen below.

To begin with, create a new SharePoint custom list (I’ve called mine Branches) with the usual default Title field and then add a new single line of text column to your list called ‘PostCode’. Once you’ve created your list, add it to your web part page and it should look something like this:

In my example I’ve added a few more columns to the list but the important one is the ‘PostCode’ column. Additionally, I’ve renamed my list view web part ‘Branches’.

Now below the ‘Branches’ web part, add another list view web part for your custom list and set the following web part properties:

· Title: Branch Location

· Height: 310

· Width: 310

You page should now look something like the image below with two similar web parts on it:

Next we are going to connect the web parts so that the Branches (Red) web part filters the Branch Location (Green) web part. To do this, edit the Branches (Red) web part and select the Connections > Send Row of Data To > Branch Location option:

Next, when prompted, set the Connection Type = Get Filter Values From, Provider Field Name = PostCode, Consumer Field Name = PostCode. Once the connection is set up, you should see that selecting a row from the Branches (Red) web part filters the Branch Location (Green) web part. So far, all standard SharePoint behaviour!

Next we’re going to take advantage of one of the new List View web part properties that SharePoint 2010 provides – that’s the ability to override the web part is rendered by specifying an alternative XSL. For those of you not familiar with XSL, it simply allows you to alter the way the default HTML or XML the web part would have displayed to something you can specify.

The XSL I’m using in this example and it’s very straight forward:

<?xml version=”1.0″ encoding=”utf-8″ ?>
<xsl:stylesheet version=”1.0″ xmlns:xsl=”http://www.w3.org/1999/XSL/Transform&#8221; xmlns:ddwrt2=”urn:frontpage:internal”>
<xsl:output method=”html” indent=”no”/>
<xsl:template match=”/” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime”&gt;
<xsl:call-template name=”dvt_1″/>
</xsl:template>
<xsl:template name=”dvt_1″>
<xsl:variable name=”Rows” select=”/dsQueryResponse/Rows/Row” />
<xsl:call-template name=”dvt_1.body”>
<xsl:with-param name=”Rows” select=”$Rows” />
</xsl:call-template>
</xsl:template>
<xsl:template name=”dvt_1.body”>
<xsl:param name=”Rows” />
<xsl:for-each select=”$Rows”>
<xsl:call-template name=”dvt_1.rowview” />
</xsl:for-each>
</xsl:template>
<xsl:template name=”dvt_1.rowview”>
<xsl:element name=”img”>
<xsl:attribute name=”src”>
http://maps.google.com/maps/api/staticmap?zoom=15&amp;size=300×300&amp;maptype=roadmap&amp;center=
<xsl:value-of select=”@PostCode”></xsl:value-of>
,United Kingdom&amp;sensor=true&amp;markers=color:red|color:red|label:Coffee|
<xsl:value-of select=”@PostCode”></xsl:value-of>
,United Kingdom&amp;key=INSERT_YOUR_KEY_HERE
</xsl:attribute>
</xsl:element>
</xsl:template>
</xsl:stylesheet>

Basically, the above XSL replaces the standard view with an image element (img) that is sourced from the Google Maps API. The Google Maps API knows what address we’ve selected as the PostCode value is passed into the Google Maps image URL via the <xsl:value-of select=”@PostCode”></xsl:value-of> parameters.

Finally, if you use the above example, you’ll need to replace the ‘INSERT_YOUR_KEY_HERE’ value with your own key obtained from Google Maps here: http://code.google.com/apis/maps/signup.html.

Once you’ve configured your XSL with your own key, upload the XSL file to SharePoint – in my example, I’ve used the SiteAssets library. Now edit the properties of you Branch Location (Green) web part and set the XSL Link property to point to you XSL file:

Press OK to save you changes and test that selecting a row from the Branches (Red) web part displays the map of the selected PostCode value:

Using exactly the same principals you can integrate many other examples to create rich mash up applications. Here we’ve integrated Google Maps and Google Charts plus added a custom InfoPath Form to edit the Branch list items to build a simple application to manage and report of branches of one my favourite coffee vendors:

Congratulations! You’ve now created a composite application that merges SharePoint data with Google Maps.