various shenanigans.

Simple Google Map from Sharepoint List using JQUERY

I created a simply JQUERY script to allow you to query location data from a basic Sharepoint list and then plot that data on a static Google Map.

Adjust where applicable and paste onto your page.

My Sharepoint list had two columns: City, State

// Call in the JQUERY Library
<script src=”/SiteAssets/jquery-1.3.2.js”></script>
// Image Placeholder
<img id=”gmap” >
// The Script
<script language = “javascript”>
// Base URL for Google Maps – You can change the size and set the markers to whatever you wish. Sensor=False is required.
var URL = ‘×480&maptype=roadmap&sensor=false&markers=size:mid%7Ccolor:red’;
// Here we build our SOAP packet that will make the call to the SP Lists webservices.
function GetWhereData()
var soapPacket = “<soapenv:Envelope xmlns:soapenv=’’>
<GetListItems xmlns=’’>
// Call in your location fields
<FieldRef Name=’Title’ />
<FieldRef Name=’City’ />
<FieldRef Name=’State’ />
// Change this path as applicable
url: “/_vti_bin/lists.asmx”,
type: “POST”,
dataType: “xml”,
data: soapPacket,
complete: processResult,
contentType: “text/xml; charset=”utf-8″”
function processResult(xData, status) {
jQuery(xData.responseXML).find(“z\:row”).each(function() {
// For Each Row in your List grab the City and State then append it to the base URL variable
URL += “%7C” + $(this).attr(“ows_City”) + “,” + $(this).attr(“ows_State”);
//alert(URL); <— For Testing
// Set the IMG SRC to your Base URL plus location data
$(‘#gmap’).attr(‘src’, URL);
// Let’s wait until the Document is loaded before we do anything.
$(document).ready( function(){
And that’s pretty much it. It’s a static map, so there’s no scroll or zoom. Saving that for another day.
Close Bitnami banner