Programmierung Thomas Weise

twGmap - Sidebar

Google Maps mit Sidebar

von Thomas Weise ( Blog)

Wenn viele Marker auf einer Google Map abgebildet werden, findet sich der User manchmal nur schwer zurecht. Eine Übersicht muss her. Wir zeigen ein Beispiel, wie man die Marker in einer Sidebar einbinden kann.

Sidebar

Version 1 (einfach)

Schauen wir uns die Google Map direkt bei maps.google.de an, dann sehen wir links von der Landkarte eine Sidebar, in der schön übersichtlich verschiedene Dinge aufgelistet werden.

Screenshot
Google Map mit Sidebar auf maps.google.de

Wir werden jetzt unser Beispiel erweitern und ebenfalls eine Sidebar einbauen.

Zuerst legen wir in der html-Datei einen div-Bereich mit der 'id="twGmapSidebar" für die Sidebar an

	<div id="twGmapSidebar"> </div>

und definieren das dazugehörige Stylesheet in der css-Datei.

#twGmap {
  float: left;
  width: 490px; 
  height: 470px;
}

#twGmapSidebar {
  float: left;
  width: 160px;
  margin: 4px;
  padding: 4px;
  background-color: #00ffff;
}

In der Javascriptdatei deklarieren wir zuerst einmal 4 neue globale Variablen. 'sidebarId' ist selbsterklärend, in 'sidebarHtml' kommt später der ganze Html-Code für die Sidebar rein. 'sidebarMarkers' ist ein Array für alle Marker, uns 'sidebarCount' zählt intern nochmal die Einträge in der Sidebar.

var sidebarId      = "twGmapSidebar"
var sidebarHtml    = "";
var sidebarMarkers = [];
var sidebarCount   = 0;

In der uns aus dem ersten Teil schon bekannten Funktion twGmapLoad() fügen wir am Ende folgenden Code ein. Damit wird nach einer Kontrollabfrage unser Sidebar-Html-Code in die Seite eingebracht.

if (!document.getElementById(sidebarId)) {
  alert("Fehler: die Sidebar mit der id "+ sidebarId+ " konnte nicht auf dieser Webseite gefunden werden!");
  return false;
} else {
  document.getElementById(sidebarId).innerHTML = sidebarHtml;
}

In der Funktion setTwMarkers() werden alle Marker erstellt. Dies erfolgt durch Aufruf je einer separaten Funktion für jeden Marker (beispielsweise 'machTwMarker01()'). Darin wird in bekannter Weise jedesmal ein Marker erstellt, jedoch zusätzlich noch eine Funktion 'machZeileInTwGmapSidebar()' aufgerufen.

  machZeileInTwGmapSidebar("Marker 1", marker);

die Funktion 'machZeileInTwGmapSidebar()' schreibt den Html-Code (für den Sidebar-Verweis auf den jeweiligen Marker) in die Variable 'sidebarHtml'.

function machZeileInTwGmapSidebar(text, marker) {
  sidebarMarkers[sidebarCount] = marker;
  sidebarHtml += '<a href="javascript:twGmapSidebarIsClicked(' + sidebarCount + ')">' + text + '</a><br>';
  sidebarCount ++;
}

Zu guter Letzt müssen wir noch eine Funktion 'twGmapSidebarIsClicked()' einfügen (sie wird aufgerufen, wenn der User auf einen Sidebar-Eintrag klickt).

function twGmapSidebarIsClicked(i) { 
  GEvent.trigger(sidebarMarkers[i], "click");
}

So sollte unsere Google Map mit Sidebar dann aussehen:

Screenshot
einfache Sidebar, enthält Verweise auf die Marker

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Version 2 - mit Buchstaben-Icons in Marker und Sidebar

Für einen Marker kann man auch andere Icons verwenden, als die standardmäßig verwendete 'rote Blubberblase'. Sinn macht es jedoch trotzdem, eben diesen Standard-Marker zu verwenden, da sich schlicht und einfach die Nutzer eben schon daran gewöhnt haben. Es ist aber auch möglich, diese Marker auch zu nummerieren, oder halt mit Buchstaben zu versehen, wie im folgenden Beispiel.

Screenshot
Fortlaufende Buchstaben in Markern und Sidebar

Die Marker und die Verweise in der Sidebar erhalten automatisch fortlaufende Buchstaben, es sollten deshalb mit diesem Beispiel erstmal nicht mehr als 26 Marker verwendet werden. Ändern Sie nun den Code in Ihrer Javascript-Datei folgendermaßen ab. Zuerst benötigen wir eine globale Variable 'sidebarZeichen' für den fortlaufenden Buchstabe.

var sidebarZeichen = String.fromCharCode("A".charCodeAt(0) - 1);

Als Nächstes eine Funktion, die uns uns das Icon mit dem fortlaufenden Buchstabe liefert.

function machTwIconBuchstabeFortlaufend() {
  sidebarZeichen = String.fromCharCode(sidebarZeichen.charCodeAt(0) + 1);
  var icon = new GIcon(G_DEFAULT_ICON, "http://www.google.com/mapfiles/marker" + sidebarZeichen + ".png");
  icon.printImage = "http://maps.google.com/mapfiles/marker"+sidebarZeichen+"ie.gif"
  icon.mozPrintImage = "http://maps.google.com/mapfiles/marker"+sidebarZeichen+"ff.gif"
  
  return icon;
}

Wenn Sie dies haben, müssen Sie nur noch in den Funktionen, die die einzelnen Marker erstellen (beispielsweise 'machTwMarker01()') den Code etwas abändern. Suchen Sie die Zeile, in der der Marker deklariert wird ('var marker = ...'). Anstatt dieser Zeile fügen Sie die zwei folgenden Zeilen dort ein. Das erstellt dann schonmal den Marker auf der Google Map.

function machTwMarker03() {
  var point = new GPoint(13.750, 51.049);
  var icon = machTwIconBuchstabeFortlaufend();
  var marker = new GMarker(point, {icon:icon});
  var html   = "Das ist das Info-Fenster von Marker 03";
  GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html)}); 
  
  machZeileInTwGmapSidebar("Marker 3", marker);
  
  return marker;
}

Um in der Sidebar vor jedem Verweis (also in jeder Zeile) diesen Buchstabe ebenfalls abzubilden, bedarf es nur einer Zeile Code in der Funktion 'machZeileInTwGmapSidebar()'. Fügen Sie vor der Zeile, die mit 'sidebarHtml += '<a href= ...' beginnt, folgende Zeile ein.

  sidebarHtml += '<span class="sidebarZeichen">'+ sidebarZeichen+ '</span>';

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Version 3 - angeklickten Marker in der Sidebar optisch hervorheben

Benutzerfreundlicher wird die ganze Sache noch, wenn der derzeitig angeklickte Marker auch in der Sidebar optisch hervorgehoben wird. Der Gestaltung sind dabei keine Grenzen gesetzt. Hier soll aber nur um 'das Technische' gehen, deshalb wird im Beispiel nur der Hintergrund gelb dargestellt.

Screenshot
angeklickten Marker in der Sidebar optisch hervorgehoben

Nehmen Sie dafür folgende Veränderungen im Quellcode der Javascript-Datei vor. Als Erstes brauchen wir wieder eine globale Variable 'sidebarLastLinkid'.

var sidebarLastLinkid;

In der Funktion 'machTwGmap()' fügen Sie folgenden Code ein, der für das Zurücksetzen der Hintergrundfarbe verantwortlich ist (wenn das Info-Fenster des Markers wieder geschlossen wurde).

  GEvent.addListener(map,"infowindowclose", function() {
    document.getElementById(sidebarLastLinkid).style.background="#fdf9ec";
  });

Danach in jeder Marker-Erstellungs-Funktion (beispielsweise 'machTwMarker03()') folgenden Code einfügen (beziehungsweise alte Codefragmente damit ersetzen).

function machTwMarker03() {
  var point = new GPoint(13.750, 51.049);
  var icon = machTwIconBuchstabeFortlaufend();
  var marker = new GMarker(point, {icon:icon});
  var html   = "Das ist das Info-Fenster von Marker 03";
  var linkid = "link"+sidebarCount;
  
  GEvent.addListener(marker, "click", function() { 
    marker.openInfoWindowHtml(html);
    document.getElementById(linkid).style.background="yellow";
    sidebarLastLinkid=linkid;
  });
  
  machZeileInTwGmapSidebar("Marker 3", marker, linkid);           
  	
  return marker;
}

Nun noch die Funktion 'machZeileInTwGmapSidebar' folgendermaßen abändern

function machZeileInTwGmapSidebar(text, marker, linkid) {
  sidebarMarkers[sidebarCount] = marker;
  sidebarHtml += '<div id="'+ linkid+ '">';
  sidebarHtml += '<span class="sidebarZeichen">'+ sidebarZeichen+ '</span>';
  sidebarHtml += '<a href="javascript:twGmapSidebarIsClicked(' + sidebarCount + ')">' + text + '</a><br>';
  sidebarHtml += '</div>';
  sidebarCount ++;
}

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Version 4 - viele Einträge auf engem Raum darstellen

Die einfachste Methode, sehr viele Einträge in der Sidebar anzuzeigen, dabei aber wenig Platz zu verschwenden: Setzen Sie im Stylesheet die Sidebar auf 'overflow: auto;' und verpassen Sie ihr eine Höhe, beispielsweise 'height: 100px;'.

#twGmapSidebar {
  float: left;
  width: 160px;
  height: 100px;
  overflow: auto;
  margin-right: 4px;
  padding: 4px;
  background-color: #fdf9ec;
  border: 1px dotted #ffbb60;
}

Screenshot
viele Einträge der Sidebar in einer Art Selektbox

Live-Demo und Quelltexte

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  Bei Fragen, Anregungen oder dergleichen schreiben Sie doch einen Kommentar in mein Blog