Web collaboration consultant, public speaker and Microsoft Press Author. @resing on twitter

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

Originally posted 7/2/2008 at my old blog host.

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.

10 Comments
  1. Where is Part 2 to this post?

  2. Glad you liked Part 1.

    I reposted this here, but the original location was on blogs.microlinkllc.com/tresing. All of my old posts are on my old blog:

    http://blogs.microlinkllc.com/tresing/archive/2008/09/23/mapping-part-2-show-a-sharepoint-contacts-list-on-a-map-from-google.aspx

  3. This is the perfect implementation I’ve been looking for, but it isn’t working in SP2010 (in fact, it may have contributed to some corrupt pages!) – what needs to be modified to make it work in 2010? I see your blog is now 2010, can you make it work here?

    Thanks!

  4. If you are having trouble with Part 2, have you tried Insert Ribbon> Data View> Empty Data View? The new web part name is the DataFormWebPart. This is very diff from the entirely new XsltListViewWebPart which is the default when you insert a data view off of a list source in SharePoint Designer 2010.

  5. I have… I didn’t have a problem following the steps, so much as I believe there may be something of a difference, specifically with the XML file and the references to the contacts list.

    I looked inside the XML file you offered as an example, and see references to workaddress and workcity – should those be something different? If I implement the XML you offered, the DataView is not displaying any information on the webpart page (though strangely it does within SPD!

    Thanks!

    Adam

  6. I got it!

    I think what I changed was this:

    1. When setting up the DVWP, I had to make sure the right fields were selected from the data source and selected the “Insert Selected Fields As” option to Multiple Item view after making sure I had selected the address fields.

    2. THEN, I pasted the contents of your XML sample file into the XSLT editor inside the webpart properties area.

    With those two changes, the map started working perfectly!

    Thanks!

    Adam

  7. Adam,

    I’m so glad it worked for you! Thanks for reporting back the steps you took. That will help others who want to use the maps in 2010.

    -Tom

  8. My users are asking me for this, thanks for the instructions, only … this site is taking quite awhile to show and not all the images are showing (i am sure it is on my end). I was hoping you had both part 1 and part 2 in a document? Also I may be missing it but I cant find Part 2.

  9. BTW we are using 2010 version.

    Thanks!

  10. Mickie,

    Thanks for reading. Yes. These old blog posts are in need of some attention. The Part 2 was taken down by the host and I haven’t reposted here.

    My latest post on the subject may be helpful though:

    http://tomresing.com/blog/Lists/Posts/Post.aspx?ID=40

    Tom

Leave a Reply