Google Maps with a SharePoint List is a useful addition to your SharePoint site. You can use this to quickly and easily display mapping information based on your data. Using Google Maps with a SharePoint List can also be a fun exercise for you to showcase to management what SharePoint can do for you.

Update: I created a new post for SharePoint 2010 and Google Maps V3.(https://marionmowen.com/google-maps-v3-with-jquery-and-sharepoint-2010/)

——————–

For this project, the request was to have a map that provides the user with information

• Location of Power Station
• Points of Interests around station
• Search for places around station
• Directions to these places around the station

What I needed to do was grab some information about the location that I wanted to show on the map. For U.S. Nuclear Stations, the address to the actual location can be hard to find and is often difficult to use with mapping systems. Directions can sometimes be “turn right on route 100 then left at the big tree”. Honestly. No Joke.

I opted to use Latitude and Longitude for the stations because they were more reliable, Google Maps friendly, and most GPS unit friendly. All of this information is public knowledge (Wikipedia, Government websites, public utility websites, etc). Combining this information, JavaScript (some jQuery), URL Filters, and a Content Editor Web Part we can build a dynamic SharePoint Google map. 

A great tool that helped me throughout the process was the IE Developer Tool. If you don’t have it, I would suggest installing it and learning how to use its basic functions.

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 

First thing we need to do is pop into SharePoint and create a Custom List.

Building the List

On your site, create a new Custom List and add, at minimum, 3 new columns that are of type “Number”. This is what is going to be use as the Latitude and Longitude as well as a unique identifier for your location.

*I added a third custom column called “LocID” because my relational data is determined by this number. I automatically filter all information on the site based off of this number by using various filters. We’ll talk about this later. 

If you need to, you can add a Description box or other columns that you’d like to store data that is unique about a location that you’d like to display on the map. For my needs, I only added these three columns.

When you’re done, start populating the list with your information about the locations.

Building the Page

The second thing that you need to do is create a blank Web Part Page to house the Map information. Use whatever layout you’d like. Add to the page

• Query String (URL) Web Part
• Your “Location” list Web Part
• Content Editor Web Part

Modify the Query String (URL) Web Part settings. Add a title to the Query Web Part (W.P.) and the Query String Parameter Name. The Query String Parameter Name is what you are filtering your locations by. You can leave the other settings to default if you’d like.

After that’s done, modify the List of your locations W.P. Choose the option to “Edit the current view” and make sure the columns of information that you want to appear on the map are displayed. This includes that unique identifier.

When you get back to your map page, modify the W.P. one more time to set the layout display to Hidden. You can also set a title for the W.P. like I did to differentiate this from the others, but its up to you.

Now we need to filter this information to show only what we want the map to show. I’m using my URL filter to knock out some info on the page and only display what I want.

Tap on the little drop down arrow next to the word “edit” in your W.P. title bar. Choose the options Connections >> Get Sort/Filter From >> Query String (URL) Filter [or whatever you called your URL filter web part]. Your list is now filtered by a URL parameter automatically.

Check in your page and give it a try.

In your URL address, at the very end, type in “?PARAMETERNAME=PARAMETERVALUE” without the quotes where PARAMETERNAME is what you put into the Query String Parameter Name  above. And the PARAMETERVALUE is your unique identifier that you want to filter your list information on. Then press Enter.

Your page should now refresh with the new data showing based on your filter value.

The last thing that you need is to modify the Content Editor W.P. Nothing special here yet, just put in a Title in the Title field. When that’s done, Check In your page to save your changes.

That was the easy part. Now we’ll add the JavaScript to make the map a map.

Building the Map

The map is built with jQuery, Googles Map API, and some HTML/CSS. The first thing you need to do is determine what you want to show on the map as well as what you want enabled on the map. Do you want to allow the users to zoom with the mouse wheel, does double clicking auto-zoom, should I show the search bar, etc. At the time of this writing, I’m using V2 (still, I know..)

The full list of features for Google Maps V2 can be found here: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html

If you’ve never used Google Maps V2 before, just give this a quick one’s-over: http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html

Sample Maps for V2: http://code.google.com/apis/maps/documentation/javascript/v2/examples/index.html

When you’re done messin around trying to figure out what you want to show, let’s start building the map itself. For this guide, I’ll show you how I built mine in particular.

Well start with grabbing the necessary Library API connections from Google. This allows us to write our jQuery and reference information from Google Maps. Open a blank JavaScript editor or just use notepad.

1. Grab yourself an API Key for your website. Google require(d) it.http://code.google.com/apis/maps/signup.html
2. At the top of your file, plaste these
   • // CDATA[
     src=”http://www.google.com/jsapi?key=ABCDEFG”>
     // ]]>
   •     // CDATA[
     src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”>
     // ]]> These are used to reference the Google Map API and the jQuery API libraries.
3. Begin writing jQuery

jQuery is used to pre-load the map when the page is ready.

$(document).ready(function(){ load_map(); });

Make some variables that will store information about the location based on the list from above. Here I used jQuery to traverse the SharePoint list for the information that I wanted. For the Latitude and Longitude information, I used the “eq(#)” parameter to grab the specified column (which happened to be of class “ms-vb2”). Use that IE Developer Toolbar I was talking about.

lat = $(‘.ms-WPBorder div table table td.ms-vb2:not(:last)’).eq(1).text(); lon = $(‘.ms-WPBorder div table table td.ms-vb2:not(:last)’).eq(2).text(); Title = $(‘.ms-vb-title’).text();

Create some new variables that the map is gonna use

var map,MyLocation,mapOptions

Then create the shell for the map Function as well as the Map Marker/Tabs with the 2 parameters “Marker” and “Tabs” being accepted.

function load_map() { }function createMarker(Marker, Tabs) { }

For my Map, I wanted to include a Google Search box. To do this, I needed to set the googleBarOptions to the “new” style. At the same time, lets initiate the map and tell it where to display (even though we haven’t created the area to display yet. That’s later.). This will go in my load_map() function.

function load_map() { mapOptions = { googleBarOptions : { style : “new” } }map = new GMap2(document.getElementById(“GoogleMaps”), mapOptions); }

We wanted to give the user an option to have pre-defined search terms for them to click on and the map will show them the information. The size of my map was too small to be user friendly, so I opted to take the user to the official Maps.Google.com page showing all the results. To do this
1. Go to Maps.Google.com
2. Search for what you want in the area you want. i.e. “Food 30339” as the search term to find food around the zip code 30339
3. Click on the “Link” icon/text to grab the Geocoding info for this particular search.
4. Now we dissect the link to pull build what we need.

The result for “food 30339” produced this link:

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Food+30339&aq=&sll=34.02734,-84.593353&sspn=0.098876,0.222301&ie=UTF8&hq=Food&hnear=Atlanta,+Georgia+30339&z=16

Looking through this link, we care about a few of these parameters:
• q=
o This is what you are looking for
• sll=
oThis is the Latitude and Longitude of the search area
• z=
o This is the zoom level. I like 14

I chopped up the URL link and made my own for Food, Hotel, and Airport and spliced in my variables where needed. And placed it in my load_map() function.

var ExtGoogleFood = ‘http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=CeHYSV4B9I7BFcImBgId4ZtZ-yn7jVB90QCqiTFSlJZyQf3z4A&q=Food+loc:+’+lat+’,’+lon+’&sll=’+lat+’,’+lon+’&sspn=0.034319,0.07699&ie=UTF8&hq=Food&hnear=&z=14′;var ExtGoogleHotel = ‘http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=CeHYSV4B9I7BFcImBgId4ZtZ-yn7jVB90QCqiTFSlJZyQf3z4A&q=Hotel+loc:+’+lat+’,’+lon+’&sll=’+lat+’,’+lon+’&sspn=0.034319,0.07699&ie=UTF8&hq=Food&hnear=&z=14′;var ExtGoogleAir = ‘http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=CeHYSV4B9I7BFcImBgId4ZtZ-yn7jVB90QCqiTFSlJZyQf3z4A&q=Airport+loc:+’+lat+’,’+lon+’&sll=’+lat+’,’+lon+’&sspn=0.034319,0.07699&ie=UTF8&hq=Food&hnear=&z=14′;

Add in information about the balloon and how to show it. I used my variables for food, hotel, and airports along with HTML. This goes in my load_map() function as well

//Format the tabs. var FirstTab = ‘ ‘+Title+’ Latitude: ‘+ lat +’ Longitude:‘+ lon +’ Food Hotel Airport/Rental For more local choices, in search box below type keywords such as restaurants with healthy food, parks. ‘; //Set the tabs. var tab1 = new GInfoWindowTab(‘Around Here’,FirstTab ); var Tabs = [tab1];

We now can set the maps parameters such as the default zoom level, where the center of the map should be, and where to place the marker. Place this in the load_map() function.

MyLocation = new GLatLng(lat,lon); var Marker = new GMarker(MyLocation); map.setCenter(MyLocation,11); map.setUIToDefault(); map.addOverlay(Marker); createMarker(Marker,Tabs); map.enableGoogleBar();

The last thing we need to do is populate the createMarker() function. This function actually draws the markers on the map itself.

//Created seperate function for the Window listener and pop up. function createMarker(Marker, Tabs) { Marker.openInfoWindowHtml(Tabs); GEvent.addListener(Marker, “click”, function() { Marker.openInfoWindowHtml(Tabs); }); }

That should be all the parts that you need to create the JavaScript component of this map. Let’s start bringing everything together.

Bringing it Together

Modify the Content Editor Web Part one more time, but move into the Source Editor…

In the Source Editor, place a <div> tag with the ID of “GoogleMaps”. This give the JavaScript a landing spot to put the map info.

<div id=”GoogleMaps”></div>

Above that, we are going to paste the stuff that you just did in your Text Editor. When you’re done, hit OK >> Apply >> OK >> Check in to Share Draft. Your new map should be showing.

Completed

// CDATA[ src=”http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvLDfOmqV0jtfPbHtxDle0hRzeMUAAIMT-x0jWB-ucWzrH3Ws5hTRp45kdvhAysF75m-I6aYyEjpGxA&sensor=false” type=”text/javascript”> // ]]> // CDATA[ src=”http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAvLDfOmqV0jtfPbHtxDle0hRzeMUAAIMT-x0jWB-ucWzrH3Ws5hTRp45kdvhAysF75m-I6aYyEjpGxA” type=”text/javascript”> // ]]>// CDATA[ src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”> // ]]><script type=”text/javascript”>///////////////////////////////////////////////********* Change only this section *********/////////////////////////////////////////////// $(document).ready(function(){ lat = $(‘.ms-WPBorder div table table td.ms-vb2:not(:last)’).eq(1).text(); lon = $(‘.ms-WPBorder div table table td.ms-vb2:not(:last)’).eq(2).text(); Title = $(‘.ms-vb-title’).text(); load_map(); }); var lat, lon; var Title; ////////////////////////////////////////////// /********************************************/ ////////////////////////////////////////////// /xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/ ////////////////////////////////////////////// var map,MyLocation,mapOptions,PlantInfo; function load_map() { mapOptions = { googleBarOptions : { style : “new” } } map = new GMap2(document.getElementById(“GoogleMaps”), mapOptions); var ExtGoogleFood = ‘http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=CeHYSV4B9I7BFcImBgId4ZtZ-yn7jVB90QCqiTFSlJZyQf3z4A&q=Food+loc:+’+lat+’,’+lon+’&sll=’+lat+’,’+lon+’&sspn=0.034319,0.07699&ie=UTF8&hq=Food&hnear=&z=14′; var ExtGoogleHotel = ‘http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=CeHYSV4B9I7BFcImBgId4ZtZ-yn7jVB90QCqiTFSlJZyQf3z4A&q=Hotel+loc:+’+lat+’,’+lon+’&sll=’+lat+’,’+lon+’&sspn=0.034319,0.07699&ie=UTF8&hq=Food&hnear=&z=14′; var ExtGoogleAir = ‘http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=CeHYSV4B9I7BFcImBgId4ZtZ-yn7jVB90QCqiTFSlJZyQf3z4A&q=Airport+loc:+’+lat+’,’+lon+’&sll=’+lat+’,’+lon+’&sspn=0.034319,0.07699&ie=UTF8&hq=Food&hnear=&z=14′; //Format the tabs. var FirstTab = ‘ //Set the tabs. var tab1 = new GInfoWindowTab(‘Around Here’,FirstTab ); var Tabs = [tab1]; MyLocation = new GLatLng(lat,lon); var Marker = new GMarker(MyLocation); map.setCenter(MyLocation,11); map.setUIToDefault(); map.addOverlay(Marker); createMarker(Marker,Tabs); map.enableGoogleBar(); } //Created seperate function for the Window listener and pop up. function createMarker(Marker, Tabs) { Marker.openInfoWindowHtml(Tabs); GEvent.addListener(Marker, “click”, function() { Marker.openInfoWindowHtml(Tabs); }); } </script>

References

• IE Developer tool: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
• The full list of features for Google Maps V2 can be found here: http://code.google.com/apis/maps/documentation/javascript/v2/reference.html
• If you’ve never used Google Maps V2 before, just give this a quick one’s-over: http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html
• Sample Maps for V2: http://code.google.com/apis/maps/documentation/javascript/v2/examples/index.html
• Grab yourself an API Key for your website. Google require(d) it. http://code.google.com/apis/maps/signup.html