nandox5

google maps + sharepoint list

Jan 10th, 2017
48
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  function retrieveListItems() {
  2.         var        listName = "North East Events";
  3.     var clientContext = new SP.ClientContext.get_current();
  4.     var oList = clientContext.get_web().get_lists().getByTitle(listName);
  5.    var website = clientContext.get_web();
  6.  
  7.     var camlQuery = new SP.CamlQuery();
  8.     camlQuery.set_viewXml('<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' +
  9.         '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>50</RowLimit></View>');
  10.     this.collListItem = oList.getItems(camlQuery);
  11.  
  12.     clientContext.load(website);
  13.     clientContext.load(collListItem);
  14.  
  15.      clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        
  16.    
  17.  
  18. }
  19.  
  20. function onQuerySucceeded(sender, args) {
  21.  
  22.     var listItemInfo = '';
  23.     var locations = [];
  24.     var listItemEnumerator = collListItem.getEnumerator();
  25.  
  26.     while (listItemEnumerator.moveNext()) {
  27.         var oListItem = listItemEnumerator.get_current();
  28.  
  29.        var eventName = oListItem.get_item('Title');
  30.        var eventAddress = oListItem.get_item('WorkAddress');
  31.        var eventURL = website.get_url() + '/' + 'Lists/North East Reports/DispForm.aspx?ID=' + oListItem.get_id();
  32.        var newLocation = [eventName,eventAddress,eventURL];
  33.        locations.push(newLocation);
  34.       // console.log(locations);
  35.      
  36.         // listItemInfo +=
  37.                //'\nID: ' + oListItem.get_id() +
  38.          //      '\nEvent Name: ' +  eventName +//oListItem.get_item('Title') +
  39.          //   '\nAddress: ' + eventAddress +//oListItem.get_item('WorkAddress') +
  40.          //   '\nURL: ' + eventURL;//website.get_url() + '/' + 'Lists/North East Reports/DispForm.aspx?ID=' + oListItem.get_id();
  41.     }
  42.  
  43.     //alert(listItemInfo.toString());
  44.     //console.log('After Loop' + locations);
  45.     return locations;
  46. }
  47.  
  48. function onQueryFailed(sender, args) {
  49.  
  50.     alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  51. }
  52.  
  53.  
  54. locations = onQuerySucceeded();
  55.  
  56. ///////////////////////////////// THIS IS WHERE I WOULD PUT MY ARRAY LIST TO GET THE MAP PINS  //////////
  57. // var locations = [
  58. //    ['Location 1 Name', 'New York, NY', 'Location 1 URL'],
  59. //    ['Location 2 Name', 'Newark, NJ', 'Location 2 URL'],
  60. //    ['Location 3 Name', 'Philadelphia, PA', 'Location 3 URL'],
  61. //];
  62. ////////////////////////////////////////////////////////////////////////////////////////////////////////////
  63.  
  64.  
  65. var geocoder;
  66. var map;
  67. var bounds = new google.maps.LatLngBounds();
  68.  
  69. function initialize() {
  70.     map = new google.maps.Map(
  71.     document.getElementById("map_canvas"), {
  72.         center: new google.maps.LatLng(37.4419, -122.1419),
  73.         zoom: 13,
  74.         mapTypeId: google.maps.MapTypeId.ROADMAP
  75.     });
  76.     geocoder = new google.maps.Geocoder();
  77.  
  78.     for (i = 0; i < locations.length; i++) {
  79.  
  80.  
  81.         geocodeAddress(locations, i);
  82.     }
  83. }
  84. google.maps.event.addDomListener(window, "load", initialize);
  85.  
  86. function geocodeAddress(locations, i) {
  87.     var title = locations[i][0];
  88.     var address = locations[i][1];
  89.     var url = locations[i][2];
  90.     geocoder.geocode({
  91.         'address': locations[i][1]
  92.     },
  93.  
  94.     function (results, status) {
  95.         if (status == google.maps.GeocoderStatus.OK) {
  96.             var marker = new google.maps.Marker({
  97.                 icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
  98.                 map: map,
  99.                 position: results[0].geometry.location,
  100.                 title: title,
  101.                 animation: google.maps.Animation.DROP,
  102.                 address: address,
  103.                 url: url
  104.             })
  105.             infoWindow(marker, map, title, address, url);
  106.             bounds.extend(marker.getPosition());
  107.             map.fitBounds(bounds);
  108.         } else {
  109.             alert("geocode of " + address + " failed:" + status);
  110.         }
  111.     });
  112. }
  113.  
  114. function infoWindow(marker, map, title, address, url) {
  115.     google.maps.event.addListener(marker, 'click', function () {
  116.         var html = "<div><h3>" + title + "</h3><p>" + address + "<br></div><a href='" + url + "'>View location</a></p></div>";
  117.         iw = new google.maps.InfoWindow({
  118.             content: html,
  119.             maxWidth: 350
  120.         });
  121.         iw.open(map, marker);
  122.     });
  123. }
  124.  
  125. function createMarker(results) {
  126.     var marker = new google.maps.Marker({
  127.         icon: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
  128.         map: map,
  129.         position: results[0].geometry.location,
  130.         title: title,
  131.         animation: google.maps.Animation.DROP,
  132.         address: address,
  133.         url: url
  134.     })
  135.     bounds.extend(marker.getPosition());
  136.     map.fitBounds(bounds);
  137.     infoWindow(marker, map, title, address, url);
  138.     return marker;
  139. }
RAW Paste Data