This explains how to show addresses in a SharePoint 2010 list on a Google Map.
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.
You’ll need to reference two script libraries: Google’s Maps API and jQuery.
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.
12 thoughts on “Google Maps API V3 geocoding with SharePoint 2010”
I need this functionality on my project and it was the last date of delivery, i got this solution and able to deliver the project.
Great thanks for above code
Thank you so much!! Works great.
Is it also possible to select only one of the items in my database and zoomed in?
I would like to add my database as “one single item”
So I get only one result, with multiple results it works… How do I get it to work with only one address??
Help is GREATLY appreciated!!
Great post. I was able to easily follow and I can’t code.
1. If only one column is showing, find the WebPartPages:XsltListViewWebPart section. Then click Add/Remove Columns from the Code View Tools section at the top of the SharePoint Designer toolbar. This will allow you to add the address field in case you were getting the following error: “geocode was not successful for the following reason zero_results”.
2. Be sure to only replace “[redacted by Aren]” with your API. You must keep “&sensor=false”
1. Are you aware of how to add other map functionality such as:
-Directions from one location to another.
-Number or letter labels associating the points on the map with the locations from the list.
Amazing work! Thanks for sharing.
Whoops, I removed that API key and replaced it with API_KEY_GOES_HERE. Thanks for pointing that out.
I don’t have answers to your question, unfortunately. I built this for a technology demo and haven’t pushed it any further.
How can we show the attachments in info window
This is great! I have requirement that needs to calculate the distance between 2 addresses within a SP 2010 foundation list. How can I accomplish this?
Can you export these geocoded addresses into an Address Locator file?
What is an “Address Locator file”?
I know it has been awhile since you posted this article… but could you giv an example of where you placed the on the sharepoint aspx page in designer.
Sorry, like you said, it’s been too long! We didn’t end up using this code in production.