{"id":109,"date":"2011-12-16T21:17:40","date_gmt":"2011-12-16T15:17:40","guid":{"rendered":"http:\/\/markwheeler.com\/wordpress\/?p=109"},"modified":"2011-12-16T21:17:40","modified_gmt":"2011-12-16T15:17:40","slug":"simple-google-map-from-sharepoint-list-using-jquery","status":"publish","type":"post","link":"https:\/\/markwheeler.com\/?p=109","title":{"rendered":"Simple Google Map from Sharepoint List using JQUERY"},"content":{"rendered":"

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.<\/p>\n

Adjust where applicable and paste onto your page.<\/p>\n

My Sharepoint list had two columns: City, State<\/p>\n

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

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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[2,10,11],"tags":[49,62,99],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-computer","category-sharepoint","category-software","tag-google-maps","tag-jquery","tag-sharepoint-2010"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/markwheeler.com\/index.php?rest_route=\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/markwheeler.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/markwheeler.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/markwheeler.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=109"}],"version-history":[{"count":0,"href":"https:\/\/markwheeler.com\/index.php?rest_route=\/wp\/v2\/posts\/109\/revisions"}],"wp:attachment":[{"href":"https:\/\/markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/markwheeler.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}