This article is based on Kyle Shaeffer’s Plotting Your SharePoint 2010 List Data on a Google Map. The main difference is I upgraded his method to Google Maps API V3.
Here’s how it’s done:
Create a list
Using SharePoint Designer 2010 (free download!), open your SharePoint site and:
- Under Site Objects, click Lists and Libraries.
- In the Lists and Libraries tab, click Custom List.
- Enter MyData and press OK.
- Click on your new list, then select Edit list columns in the Customization section.
- Add a Multi Lines of Text field using the Add New Column button at top left:. Name it Address.
Create data view
Still in SharePoint Designer 2010:
- Click Site Pages under Site Objects on the left:
- In the ribbon at top, select Page > ASPX. Name your new page map.aspx.
- Click on the new page, then click Edit file in the Customization section. If asked to open the page in advanced mode, click Yes.
- Make sure that Design or Split are selected at bottom. From the menu at top: Insert > Data View > MyData
Now you’ll see your data in a table in the page.
Find the opening <form> element in the source code. Right after it, paste this code:
Replace API_KEY_GOES_HERE with your own Google API key. Don’t have one? Get it at https://code.google.com/apis/console/. Be sure to get a Google Maps API v3 key! v2 is deprecated.
Now you need to add an onload attribute to your body tag to fire off the initialize function:
Viola! You have a map that dynamically pulls from the below list!
The initialize method works by scraping from the rendered HTML. It’s finding every tr with class ms-itmhover–which is what is produced by the data view you inserted above. Then within each of those trs, it finds:
- The first item with class ms-rtestate-field and gets its text contents. This will be your address.
- The contents of the a tag within the first element with class ms-vb-title, which is the title field.