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 = ‘https://maps.googleapis.com/maps/api/staticmap?size=640×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=’http://schemas.xmlsoap.org/soap/envelope/’>
<soapenv:Body>
<GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’>
<listName>Locator</listName>
<viewFields>
<ViewFields>
// Call in your location fields
<FieldRef Name=’Title’ />
<FieldRef Name=’City’ />
<FieldRef Name=’State’ />
</ViewFields>
</viewFields>
</GetListItems>
</soapenv:Body>
</soapenv:Envelope>”;
jQuery.ajax({
// 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(){
GetWhereData();
});
</script>
And that’s pretty much it. It’s a static map, so there’s no scroll or zoom. Saving that for another day.
