Mapping: Part 1 Show a SharePoint Contacts List on a Map from Google 

Tags: Maps

Summary

Demonstration of a SharePoint Contacts List displayed on a Google Map.

Key Points

  1. The Contacts List Template in SharePoint provides fields for addresses
  2. Google Maps provides a mapping service
  3. SharePoint integrates easily with web services

Overview

  1. Part 1
    1. Create a new contacts list
    2. Create a new Page
    3. Add a Google Map to the page
  2. Part 2
    1. Add a Data View of the contacts list to the page
    2. Modify the Data View to show the contact's locations on the map

Demonstration

Create a new contacts list

Open the Site Actions Menu and Select Create

Select the Contacts Template

Name the new list Map Contacts

Add a couple of contacts

I've chosen to add a SharePoint MVP who lives in Houston, Texas. For this example, I'm just mapping the city and state, but with a little more work you could map a street address.

Create a new Page

This is similar to the first step, but Choose Web Part Page.

Name the page, then pick any layout and select a Document Library.
Note: If you don't have a Document library to use, you can add one from the Create button and then come back to this step.

Add a map

On our new page, select Add a Web Part

Select the Content Editor Web Part

The next part is a little bit complicated, but I have tried to make it a little simpler by providing this download GoogleMapsGeocodeExtract.txt.html. The one modification required to the html file is to change the API key. After you edit the file, upload it to your Document Library and put the URL in the Content Link property of the Content Editor Web Part.

Note about the API Key: Google Maps API Keys are linked to your domain name of your website. To acquire a key, signup by entering your website URL.

At this point you will have a working map displayed on a SharePoint page (demo link on blogs.microlinkllc.com). In Part 2, you will display the contacts on the map.

Note: If you have any trouble following the steps in this post, I just found a excellent post on SharePoint Blogs with a 4 step process to get just a basic map running in a content editor web part.

Update 9/9/08: I added the demo link and the reference to SharePoint blogs for added detail.

 
Posted by Tom Resing on 3-Sep-08
5 Comments  |  Trackback Url  |  Link to this post | Bookmark this post with:        
 

Comments


Ian Morrish commented on Tuesday, 9-Sep-2008
Examples using Virtual Earth Multiple pins on map http://www.wssdemo.com/pages/map.aspx Single location from address http://www.wssdemo.com/demo/default.aspx Regards, Ian


Tom Resing commented on Wednesday, 10-Sep-2008
Those are great Virtual Earth examples. Thanks for giving back to the community Ian!


Jar commented on Monday, 15-Sep-2008
thanks for the useful article, when u gonna post part 2 ?


Tom Resing commented on Monday, 15-Sep-2008
Jar, Thanks for the feedback! I plan to publish part 2 this week. Tom


Phlogiston commented on Monday, 22-Sep-2008
Great Tutorial. Got the map piece going. Looking forward to how I might be able to pass my contact list parameters to the Google Maps geocoder. Your adoring public awaits part 2.

Name:
URL:
Email:
Comments: