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

This is the second part in a two part series on mapping a contacts list from SharePoint on a map from Google.
In part one, we created a contacts list, a page and put a map on the page.

Part 2 – in SharePoint Designer

  1. Add a data view web part
  2. Modify the display of the new web part

Add a Data View Web Part

  • Select an empty Web Part Zone
  • Select Insert Data View from the Data View menu

  • Select a List Name from the Data Source Library and drag to the Web Part Zone

  • Save!

Watch how to Insert a Data View Web Part

Modify the display of the new web part

  1. Right click anywhere in the Data View Web Part
  2. Select Web Part Properties

  3. Expand Miscellaneous

  4. Select your XSL Link (feel free to use my XML file, remove the .txt extension before uploading)

  5. Hit OK
  6. Save!

Screencast: SharePoint Designer – Apply a Custom Stylesheet to a Data View Web Part

Update 5/23/2016: Restored images and links from backup

  1. Great guide! I’ve successfully set this up, but am finding varied results with the GeoCoding part. I find that on each load of the page, some of the points fail all the time, and others fail only sometimes. Is there a timeout value I can increase? I’d probably have better luck with lat/lon but that’s a lot more work (I’m aiming for upwards of 100 points). Thanks!

  2. Ray, Thanks! I’m glad you found this helpful. Geocoding is a processor and time intensive process. Google suggests caching the results for best performance. You can read more about it in the API,
    You might also try viewport or country biasing, though I don’t know if that improves performance or just accuracy.

  3. KC,
    I like the idea of filtering the map and have done it in the past. If I get a good example running, would you like to see it posted on the blog?

  4. thanks a lot,
    what if i want to use latitude and longitude in my SP list to define the location rather than city and address?

  5. Jar,
    If you have latitude and longitude fields in your list, you can pass them to the javascript and add them to the map directly. In the example on this post, we’re doing extra work to find the latitude and longitude. I’ll post an example in a couple weeks.

  6. Excellent post. I pasted in your XSL code and it worked great. Thank you for sharing.

  7. Tom, Thanks for the great post. You got me 90% of the way. Still having problems b/c I’m using lat and lng values in my list. Any chance that example you mentioned in September is ready for prime time? Thanks!

  8. Hi Tom, thanks for posting this. Would i need to change the XML in order to get the persons name into the google map marker along with their location?

  9. Would the map re-render with different pushpins if you applied filtering to a column. For example, filter for just contacts in Houston.

  10. The link to the webcast appears to be broken.

  11. Kim, I’ll check that out soon. CommunityClips is blocked by a firewall where I am.

  12. Rather than have the Google map embedded (it is for an Intranet so we can’t use the Google API) I’d like to be able to create a link based on the address string which I extract from a contacts list. In the code below I make a string for the address by concatenating Address, City, State & Zip and then create a directional map by adding my office address.

    This works fine in Access (with a “click to show map” button but how would I do it in Sharepoint?” & strAddress & “&daddr= ***My office address goes here ***”

  13. Ian,
    You could use the Data View Web Part with a modification of my GoogleMapsListMarkers.xml. However, I suggest you check out calculated columns. If you could accomplish what you’re after with that it’s easier to learn.

  14. Get an open source Contact map tool here of google maps:

    This is a SharePoint 2010 feature that allows users to view the contact addresses on google maps, by accessing the addresses on the contacts list items one can view these address on the google maps.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.