Table of Contents

1. Intro.
2. Supplies needed.
3. Step 1 – Browser setup.
4. Step 2 – SharePoint List.
5. Step 3 – REST.
6. Step 4 – jQuery AJAX and JSON and Fiddler.
7. Step 5 – Going through the data.
8. Final 
   

Intro

A SharePoint list housed my Latitude and Longitude, location information, and administrative information. Leveraging SharePoint REST services, I tapped into the list data with jQuery’s $.ajax() method with JSON. You’re gonna then want to traverse through the data that is returned and package them into a Google Maps v3 map object to display on your page.

As a side note, browser version should not matter, since its 2012…get with the times and update your browsers. At the time of this writing, I’m using Internet Explorer (IE) 8 and have tested on Chrome 20.0. Since we can use IE 9/Chrome/Firefox, think about expanding this to use HTML 5 features. Unfortunately I can’t at the moment b/c my company is slating out IE 9 debut later this year.

Supplies needed

To get started, I needed to set up the environment on order for me to get the data. A few things that I needed to know

• The name of the list
• The data contained in the list
• Where you’re going to be displaying the data
• Fiddler Web Debugger
• Internet Explorer Feed Viewer in XML.
• Google API V3 references

Step 1 – Browser setup

Set IE to reed RSS feeds in XML view. In IE, got to Tools > Internet Options > Content tab > Settings under the Feeds and Web Slices section. UN-Check the option to “Turn on feed reading view” to allow you to view the raw XML data coming back from your list to help troubleshoot the data set you’re trying to get.

What did we just do? Well, we just made any RSS feed display the raw XML data going on behind the scenes. Sample here: Google News Feed. We need this because SharePoint 2010 REST services essentially piggybacks off the RSS feed capabilities of Lists/Libraries. Yum!

Step 2 – SharePoint List

Create a list to house your data. I used a Custom List and populate my list with the columns I need. In this case, you’re gonna need a Longitude and Latitude column to house the location information at least.

I needed an extra column to use to filter the specific location that I needed. I called my column “LocID” with numerical values. This is what I am using to filter out the required location information. You can make yours whatever you’d like.

I’m not going to go through the details of creating a list and columns. You should be able to handle it if you’re reading this.

Step 3 – REST

We’re going to now create a REST service link for what you want to grab. Hopefully you read the link above those talks about SharePoint 2010 REST services URL syntax. If you’re like me, you probably didn’t read it the first time either… I’ll give you cheat sheet here:

RESTful interface URL	Description
http://yourdomain/_vti_bin/ListData.svc	Returns all lists
http://yourdomain/_vti_bin/ListData.svc/MyList	Returns all items in MyList
http://yourdomain/_vti_bin/ListData.svc/MyList?$orderby= LocID	Returns all items in MyList ordered ascending by LocID
http://yourdomain/_vti_bin/ListData.svc/MyList?$orderby=LocID desc	Returns all items in MyList ordered descending by LocID
http://yourdomain/_vti_bin/ListData.svc/MyList?$filter=LocID eq ‘895’	Returns all items in MyList that has a column that content is equal to 895
http://yourdomain/_vti_bin/ListData.svc/ MyList (7)	Returns the third item in MyList

Additional filter information: http://msdn.microsoft.com/en-us/library/gg309461.aspx

As you can see, the link is pretty straight forward to use REST services. The link that I used is this one

http://yourdomain/_vti_bin/ListData.svc/MyList?$filter=LocID eq ‘895’

I’m using the link above to pull back data from my list called “MyList” from my website called “yourdomain”. The list is then filtered with the filter name “LocID” with a value equal to “895”. Of course, your link may look/behave different.

Pop that bad into your browser and take a look at the data returned. You’ll get something like this

The data that I’m after are selected in red. The Latitude and Longitude data from my list with the LocID filter value of ‘895’. That was the easy part. We just proved that the data is accessible, now we need to actually get the data.

Step 4 – jQuery AJAX and JSON and Fiddler

With the REST service bringing back the data, we can now use jQuery to do something with our stuff. Using the AJAX ($.ajax()) method for parsing our data is the currently the more efficient way to keep overhead down and retrieve our data quickly.

First we need to understand how the data is actually riding on the wires to get to the browser. We also need to be able to troubleshoot and pinpoint where any problems may arise. To do this, we are going to use a little tool called Fiddler (Fiddler Web Debugger: http://www.fiddler2.com/fiddler2/).

Fiddler basically interprets any browser traffic for you and breaks it down into different types of data. It does a good job of spelling out what is coming across the wire. Specifically, what is coming across when we perform a jQuery AJAX call (it’s using JSON to identify and bring the data over).

JSON is the data type that $.ajax() can bring over and JSON is what we will use because of its ease of use and ability to work with jQuery.

To use Fiddler, simply install it on your machine, and run it. It will take a look at any data that is sent across the browser and display it for you.

Start up your favorite browser and put in your REST URL that you created up top. You should start to see the left side of Fiddler fire up and start to fill in.  Go ahead and switch to the Inspectors tab on the right side.

Pay attention to the URL column and you’ll see part of your REST call with your filter in there. For example:

Click on the line with the value of 200 in the “Results” column. Then on the right window section of fiddler, the tidbits that we need are under the JSON tab.

Step 5 – Going through the data

Now that we have identified everything that is coming over, we use the jQuery AJAX call to go through our data that we have identified.

I ran my AJAX on $(document).ready because I needed my map to load right away. You can put this into a function and call it when needed. It’s up to you.

$.ajax({

url: “http://inform2010devv2/_vti_bin/ListData.svc/Stations?$filter=LocID eq 898”,

dataType: “json”,

error: function (xhr, ajaxOptions, thrownError){

alert(thrownError);

alert(xhr.responseText);

alert(ajaxOptions.responseText);

},

success: function(data) {

var test = data.d.results;

$.each(test, function(i,sample) //Need to loop through all of the results to get the

information we need. This is b/c of how the SP data is structured.

{

Map(sample.Lat,sample.Long);

MapInfo(sample.Title,sample.RentalCar,sample.Lat,sample.Long);

});

}

});

That’s the core of the jQuery AJAX call for the data. The “success:” option runs the function that Google uses to build the map. I passed in the data object from the AJAX result (sample.Lat, sample.Long). Notice that the naming convention of how to get to the data is similar to the structure of the JSON results.

“data.d” is the first level. “data.d.results” represent the second and so forth.

Now you just need to combine your data results with Google Map calls and you should be set to go. The methods of the map are pretty straight forward. There are tons of examples on how to create a simple map that you can use and go from there. MY “Final” is using a simple map with a pop up marker icon.

Final

$(document).ready(function() {

var marker;

var info;

var map;

$.ajax({

url: “http://inform2010devv2/_vti_bin/ListData.svc/Stations?$filter=LocID eq 898”,

dataType: “json”,

error: function (xhr, ajaxOptions, thrownError){

alert(thrownError);

alert(xhr.responseText);

alert(ajaxOptions.responseText);

},

success: function(data) {

var test = data.d.results;

$.each(test, function(i,sample) //Need to loop through all of the results to get the information we need. This is b/c of how the SP data is structured.

{

Map(sample.Lat,sample.Long);

MapInfo(sample.Title,sample.RentalCar,sample.Lat,sample.Long);

});

}

});

function Map (lat,lon)  //Load the map.

{

var myOptions = {

center: new google.maps.LatLng(lat, lon),

zoom: 12,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById(“map_canvas”),

myOptions);

}

function MapInfo (title,car,lat,lon)  //Load information about the station and area.

{

var contentString = ‘

‘+title+’

‘+

‘

Latitude: ‘+lat+’
Longitude: ‘+lon+’

‘+

‘<p>Car needed: ‘+car+'</p>’+

‘<p><a href=””>Airport</a></p>’+

‘<p><a href=””>Hotel</a></p>’+

‘<p><a href=””>Food</a></p>’;

marker = new google.maps.Marker({     //Load the maps location icon. Need to load AFTER the map is “created”.

map: map,

position: map.getCenter(),

});

infowindow = new google.maps.InfoWindow ({

content:contentString

});

 google.maps.event.addListener(marker, ‘click’, function() {         //What happens when you click on the map marker

 infowindow.open(map,marker);

                                                });

};

});