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

Ziel unserer kleinen Lösung soll es sein, in einer Liste ausgewählte Listeneinträge auf einer Google-Map anzuzeigen. Der kleine Kniff dabei ist, die Adressdaten über die Google-API in Geokoordinaten umwandeln zu lassen.

Am Ende sieht das Ganze dann in etwa so aus:

Full _example

Dieses Ergebnis in der Sharepoint-Oberfläche werden wir nun mit folgenden Mitteln realisieren:

blog_overview.png

Dabei setze ich HTML und Javascript-Kenntnisse sowie eine gewisse Übung im Umgang mit Sharepoint WebParts voraus.

Schritt 1: Die Google-Maps API in die Masterpage einbinden

 

Damit die Masterpage nicht verändert werden muss kann über folgende ca. 3 KB "große" User-Solution die Google-Maps API ein- und ausschaltbar in die Masterpage integriert werden.

Bitte laden Sie zunächst die Lösung herunter: googleMapsForOffice365.wsp

Dann laden Sie das .wsp in den Site-Einstellungen unter "Gallerien" - "Lösungskatalog" hoch und aktivieren es über das Kontextmenü:

Solution _upload

Als nächstes sollten Sie überprüfen, ob alles geklappt hat. Dazu rufen Sie eine beliebige Listenseite auf und suchen im HTML-Quelltext nach folgender Zeichenfolge: maps.google.com/maps/api

Schritt 2: Ein Inhalts-Editor Webpart in eine Liste einfügen

 

Als nächstes fügen Sie über "Websiteaktionen" - "Seite bearbeiten" in eine Liste (am geeignetsten ist eine Kontaktliste) ein neues Inhalts-Editor Webpart ein. Das Inhalts-Editor-Webpart können Sie entweder mit einer Datei verknüpfen (in der dann das Javascript abgelegt wird) oder direkt eingeben. Der Einfachheit halber habe ich im Ribbon "HTML" - "HTML-Quelle bearbeiten" gewählt - empfehlenswerter ist es aber, den Code in eine Datei auszulagern, die dann in mehreren Sharepoint-Seiten wiederverwendet werden kann.

Als erstes soll ein Button entstehen, den man drückt, um die Landkarte anzuzeigen. Die Landkarte selbst kommt in ein eigenes DIV ("map_canvas"), in das die Google-Maps-API später per Javascript die Daten einfügt:

<input type="button" onclick="showCustomers()"
value="Markierte Kunden auf Karte anzeigen"/>

<div id="map_canvas" style="margin-top:12px; width:800px;
display:none;height:500px"></div>

Da wir momentan die HTML-Quelle bearbeiten, können wir auch gleich den Javascript-Code einfügen:

function showCustomers() {

// Landkarte aufbauen, auf die dann später die Marker gesetzt werden 
//
var myOptions = {
              zoom : 10,
              center: new google.maps.LatLng(49.50312, 11.248209999999971),
              mapTypeId: google.maps.MapTypeId.ROADMAP
           };
  
          
// die Karte vom Google WebService holen
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

}

Damit passiert zunächst einmal nur, dass die Karte angezeigt wird. Der Mittelpunkt der Karte wird mit dem Parameter "center" in Form von Geo-Koordinaten festgelegt. Hier noch ein kleiner Tipp, wie man über Google-Maps die Geo-Koordinaten eines beliebigen Punkts ermitteln kann:

Google _here

Wenn man über einem beliebigen Punkt auf der Karte die rechte Maustaste drückt und "Was ist hier?" auswählt, erscheinen im Texteingabefeld von Google die Geokoordinaten des angeklickten Punkts:

Google _this

Im zweiten Teil dieses Posts werden wir die Sharepoint-Daten auf der Karte platzieren - dort finden Sie dann auch den kompletten Javascript-Code.

Geschrieben von am 10.07.2012, 12:35

Kommentar verfassen

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