Google Maps in Sharepoint 2010/Office 365 verwenden - Teil 2

Nachdem wir im vorhergehenden Teil dieses Posts die Grundlagen geschaffen haben, um Sharepoint-Daten mittels Javascript und der Google-Maps-API zu visualisieren, geht's jetzt in die Vollen!

Nicht vergessen: Im Internet Explorer können eventuelle Tippfehler in Javascript mit F12 - Console leicht entdeckt werden - im Firefox empfehle ich die FireBug-Extension.

Hier nochmal unser Ziel: In einer Sharepoint-Liste können bestimmte Datensätze ausgewählt werden, die dann auf einer Google-Map angezeigt werden.

Full _example

Im ersten Teil des Blog-Posts haben wir bereits die Karte vorbereitet - jetzt müssen die Daten aus Sharepoint an die Google-Maps-API übergeben werden. Dazu lesen wir zunächst die markierten Einträge der Sharepoint-Liste über das Sharepoint Client Object Model aus:

// Einstiegspunkt: der Sharepoint-Kontext
context = SP.ClientContext.get_current();
var web = context.get_web();

// Erst mit .load werden Daten von den WCF-Service abgerufen
context.load(web);

var currentlibid =  SP.ListOperation.Selection.getSelectedList(); 
var currentLib = web.get_lists().getById(currentlibid);

// jetzt die aktuellen Items aus der Liste ermitteln
//
var selectedItemCount = SP.ListOperation.Selection.getSelectedItems().length;
// Array definieren, das so viele Elemente umfaßt wie ausgewählt wurden
currentItem = new Array(selectedItemCount);

// alle selektierten Items durchlaufen und in ein Array übertragen
//
items = SP.ListOperation.Selection.getSelectedItems(context);             
for (k in items)
{
    currentItem[k] = items[k].id;  
}

Jetzt haben wir die IDs der ausgewählten Sharepoint-Items im Javascript-Array currentItem und können als nächsten Schritt, die Adressdaten von Sharepoint erfragen:

//  Jetzt geht der CAML-Spaß los :-)
//
var queryA = '';
var queryB = '';

// a) über die IDs der selektierten Items die WHERE-Bedingung befüllen und verschachteln
for (var i = 0;i0){
         queryB = queryB + "";
         queryA = queryA + "";
      }

}
// b) die gewünschten Felder angeben (kann man auch weglassen, dann werden aber u. U. sehr viele Daten sinnlos übertragen)   
queryA = queryA + queryB + '';

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(queryA);

// jetzt wird die Abfrage wirklich "abeschossen"
allItems = currentLib.getItems(camlQuery);
context.load(allItems);

In einer Schleife werden nun die von Sharepoint abgefragten Daten in Google-Maps Marker umgewandelt:

// jetzt asynchron die Daten holen
  // Achtung: fieserweise und mit voller Absicht hat Microsoft kein synchrones executeQuery vorgesehen!
  //
  context.executeQueryAsync(Function.createDelegate(
                               this, GetItemSuccess),
                              Function.createDelegate(
                               this, GetItemFailed));

Da die Sharepoint-Daten-Abholen-Operation nur asynchron ablaufen darf (um die Benutzeroberfläche nicht "einfrieren" zu lassen), geht es im Code nun im Ajax-Callback weiter:

// wird aufgerufen, wenn die Adressdaten der Liste von Sharepoint zurückgeliefert wurden
// (asychron)
//
function GetItemSuccess(sender, args) {
     
        allAddresses = new Array();

        var listEnumerator = allItems.getEnumerator();

        // die von Sharepoint zurückgegebenen Daten "zeilenweise" in
        // ein Array (allAddresses) laden
        //
        while (listEnumerator.moveNext()) {
            var currentItem = listEnumerator.get_current();

            var address = currentItem.get_item("WorkAddress") + "/" +
                          currentItem.get_item("WorkCity") ;
            var customer_name = currentItem.get_item("Title") ;

            // so definiert man in Javascript ein "Objekt"
            var obj = {  cname: customer_name,
                         caddress: address };
            
            allAddresses.push(obj);

            // alert( currentItem.get_item("Title") + ": " +
            //       currentItem.get_item("WorkAddress") + "/" +
            //       currentItem.get_item("WorkCity") );

         } // while

         // b) Marker (die im Array sind) auf Landkarte setzen
         //
         for (var i=0;i

Das eigentliche Ansprechen der Google-Maps-API (Umwandeln der Adresse in Geo-Koordinaten) erfolgt in folgender Subroutine:

// Setzt einen einzelnen Marker auf der google Map ein
// Closure (wegen Schleife)
//
function MakeSetMarkerToMap(l) {

    // Eigentliche Funktion 
    function SetMarkerToMap() {

        // der Geocoder übersetzt eine lesbare Adresse in Geo-Koordinaten (Länge/Breite)
        var geocoder = new google.maps.Geocoder();           

        geocoder.geocode( { 'address': l.caddress}, function(results, status)   
            {      
                if (status == google.maps.GeocoderStatus.OK) {        
          
                       var latlng = results[0].geometry.location;
                       
                       // den Marker einsetzen
                       var marker = new google.maps.Marker(
                       {      position: latlng,      
                              title: l.cname + ": " + l.caddress});
                       // auf der Karte platziern
                       marker.setMap(map); 
                } // if
            }); // geocode

    } // function SetMarkerToMap

    SetMarkerToMap();

} // function

Die Besonderheit der obigen Subroutine ist die Verwendung eines Javascript Closure, also einer Unterroutine, die innerhalb einer Funktion definiert wird und zur Laufzeit Zugriff auf die in der umgebenden Funktion (Closure) definierten lokalen Variablen hat.

Den kompletten Code zum Kopieren, die notwendigen Sharepoint-Solutions für Google Maps und jQuery sowie einige zusätzliche Erläuterungen finden Sie in folgender Power-Point-Präsentation: Sharepoint Client Object Model und Google Maps.ppt

Geschrieben von am 11.07.2012, 11:00

Kommentar verfassen

Ihre Email-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *