Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Thomas Weise 14. Oktober 2008

Google Maps mit Sidebar

Kein Beitragsbild

Google Maps werden umso informativer, je mehr verschiedene Dinge darauf abgebildet sind. Um den Überblick bei sehr vielen Markern zu behalten, ist es günstig, diese zusätzlich in einer Sidebar neben der Google Map noch einmal zusammenzufassen. Dort kann man diese auch gleich noch nach Themen ordnen. Die Benutzer können dann viel besser ihr gesuchtes Ziel finden, ohne erst jeden einzelnen Marker anklicken zu müssen.

Anzeige

Diesmal geht es um die programmiertechnischen Grundlagen, eine Sidebar an eine Google Map anzufügen. Diese Sidebar enthält Verweise auf die verschiedenen Marker der Google Map. Während auf der Map die örtliche Darstellung erfolgt, kann man in der Sidebar eine thematische Anzeige besser bewerkstelligen. So kann man beispielsweise von einem Gebiet alle Tankstellen, alle Gaststätten und dergleichen mehr anzeigen.

Version 1 (einfach)

Dieses Beispiel zeigt die Grundlagen, wie eine solche Sidebar an eine Google Map gekoppelt werden kann. Beim Erzeugen eines neuen Markers für die Google Map reicht dann später eine einzige Zeile Code, um diesen in der Sidebar mit aufzuzählen.

Schauen wir uns die Google Map direkt bei maps.google.de an, dann sehen wir links von der Landkarte eine Sidebar, in der verschiedene Dinge aufgelistet werden. Diese Sidebar bietet natürlich mächtigere Funktionen, als die in unserem Beispiel gezeigten, aber es soll uns hier auch nur um die Grundlagen gehen.


Google Map mit Sidebar auf maps.google.de

Wir werden jetzt unser Beispiel aus Google Maps – Teil 1 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

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 Javascript-Datei 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;

Nun schreiben wir zwei neue Funktionen. Die erste heißt ‚machZeileInTwGmapSidebar(text, marker)‘. Darin soll dann praktisch der jeweilige Eintrag in der Sidebar erzeugt werden (‚text‘ ist der Text, der dann in der Sidebar angezeigt wird, und ‚marker‘ ist der Marker, der beim Klick angezeigt wird).

function machZeileInTwGmapSidebar(text, marker) {
  sidebarMarkers[sidebarCount] = marker;
  sidebarHtml += '' + text + '';
  sidebarCount ++;
}

Die zweite neue Funktion heißt ‚twGmapSidebarIsClicked()‘. Sie wird aufgerufen, wenn der Benutzer auf einen Sidebar-Eintrag klickt.

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

In der uns aus dem ersten Teil schon bekannten Funktion ‚twGmapLoad()‘ fügen wir am Ende folgenden Code ein. Dort wird nach einer Kontrollabfrage der fertige Html-Code in die Seite eingefügt, also die Sidebar angezeigt.

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;
}

Wenn Sie dieses alles in Ihren Code eingebunden haben, ist der größte Teil schon getan. Nun müssen Sie nur noch beim Erstellen eines jeden Markers, der auch in der Sidebar abgebildet werden soll, eine einzige Zeile einfügen (und dabei den jeweiligen Text und Marker mit übergeben).

machZeileInTwGmapSidebar("Marker 1", marker);

(die Funktionen für das Erstellen eines Markers sind die ‚machTwMarkerXX-Methoden, beispielsweise ‚machTwMarker01()‘)

So ähnlich sollte unsere Google Map mit Sidebar dann aussehen:


einfache Sidebar, enthält Verweise auf die Marker der Google Maps

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.


Fortlaufende Buchstaben in Markern und Sidebar der Google Map

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 Buchstaben.

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 schon mal 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 += ''+ sidebarZeichen+ '';

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 es aber nur um ‚das Technische‘ gehen, deshalb wird im Beispiel nur der Hintergrund gelb dargestellt.


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 Code-Fragmente 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 += '
'; sidebarHtml += '' + sidebarZeichen + ''; sidebarHtml += '' + text + ''; sidebarHtml += '
'; 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;
}


viele Einträge der Sidebar in einer Art Selektbox

Live-Demo und Quelltexte

Thomas Weise

Thomas Weise ist gelernter Anwendungsentwickler. Ihn zog es aber immer schon in Richtung Internet und Webentwicklung. Seine Artikel auf drweb sind Gastartikel, selbst bloggt er auf

27 Kommentare

  1. Danke für die sehr gute Beschreibung.
    Wie bekomme ich es hin, dass der Text in der sidebar nicht untereinander sondernnebeneinander dargestellt wird?

    Ist es auch irgendwie möglich nach z.B. 5 Einträgen nebeneinander
    eine neue zeile zu generieren. Könnte man das mit einem Zähler als script erreichen?

  2. In Beispiel werden für die Marker vorhandene Icons direkt von Google verwendet. Die Anzeige mit Buchstaben hat hier den Vorteil, dass auf dem Marker nur ein Zeichen abgebildet werden muss (bei Zahlen wäre das dann schon ab der zehnten zweistellig).
    Ansonsten gibts hier auch noch paar Links zum Thema.

    Falls du das Skript dennoch umbauen möchtest müsstest du bei:
    var sidebarZeichen = String.fromCharCode(„A“.charCodeAt(0) – 1);
    beginnen und dann eigene Marker erstellen lassen.

  3. Hi,

    danke für die tollen Tutorials auf dieser Seite. Ich stehe vor einem Problem. Ein Kumpel will ne Seite, auf der er seine Ziele einer Weltreise eintragen will. Das geschieht über ein CMS-System. Alles kein Thema soweit…

    Ich möchte allerdings gerne die verschiedenen Standorte anstatt mit Buchstaben mit Zahlen versehen. Das werden nämlich deutlich mehr als 26 werden. Wie kann ich das lösen?

    Gruß
    Christian

  4. Zunächst einmal vielen Dank für die ausführliche Beschreibung.
    Allerdings würde ich gerne noch wissen, wie ich als Marker auch andere Icons, statt der roten Blubberblasen einbauen kann.
    Vielen Dank für Eure Tipps
    Richard

  5. Google Maps Api ist wirklich eine tolle Sache und nicht schwierig zu verstehen, ich finde den Artikel gut aufbereitet für Einsteiger und wirklich empfehlenswert.

  6. Hallo Thomas, nein, Tooltipps meinte ich nicht, ist aber auch ´ne schöne Spielerei! Aber egal, inzwischen möchte ich eine zweite Sidebar einbauen – das stellt mich vor unerwartete Probleme:
    Ich habe einfach auf der Site eine Tabelle eingerichtet; eine Spalte (links) dient für die Sidebar, die andere (rechts) für die Google Map.
    Nun möchte ich, da ich viele Marker setzen muss, eine weitere Spalte als Sidebar nutzen (rechts von der Karte).
    Ich bekomme aber keinen Zugriff hin.
    Hast Du einen Tipp?

    Ingo.

  7. Falls du sowas wie Tooltipps meinst, guckst du auf http://www.walterzorn.com/tooltip/tooltip_e.htm .

  8. Ich habe eine Google Map mit Sidebar auf einer Seite eingebaut – die Infos auf dieser Seite haben mir wunderbar weiter geholfen; ich möchte jedoch erreichen, dass ich aus einem Text heraus bestimmte Wörter als Link hinterlege und die Info-Fenster darüber öffnen kann. Hat jemand Ahnung wie man das bewerkstelligt??

  9. Sorry, hab lange nicht reingeguckt.
    @Matthias: Eigentlich ist ja die Sidebar ganz normales html, soll heißen, da kannste wie in einer normalen Webseite eine Blätterfunktion einbauen. Ein paar Links dazu könntest du evtl auf http://www.drweb.de/magazin/paginierung-seiten-nummerieren/ finden.
    @Annett: Eigentlich dasselbe, die Sidebar ist ein ganz normaler div-Container, der z.B: mit display oder vivibility angezeigt oder verborgen werden kann.
    @Jürgen: Scheint ja jetzt zu klappen auf deiner Seite ;-).
    @Leonhard: Naja, stimmt schon. Ist halt auch für Leute gedacht, die mal selbst Hand anlegen möchten und sich dann über das selbst Geschaffte freuen können.

  10. Wie erstelle ich eine Blätterfunktion für die Google Map Sidebar und Marker.

    Es sollen max. 15 Marker angezeigten werden und dann eine Blätterfunktion vor und zurück.

    Die DAten werden aus einer MySQL DAtenbank geladen.

    Mfg Matthias

  11. Hallo zusammen,
    ich sitze gerade vor einer, wie mir scheint, ziemlich komplizierten Aufgabe eine zu- und aufklappbare Sidebar zu bauen, wie man sie von google.maps kennt. Eigentlich hoffte ich in diesem Artikel etwas mehr über die Technik zu erfahren, also wie es bei google.maps gelöst wurde oder evtl. wie es sonst zu lösen ist.
    Ist das ein DIV-Container und JavaScript??? Finde bisher nichts im Internet was dieses beschreiben/erklären würde.

    Weiß jemand wie das gelöst wurde und kann mir ein paar Tipps geben?

    Danke im Voraus
    Annett

  12. Hallo Thomas

    Sitze jetzt schon mehr als 4 Stunden verzweifelt an deiner Beschreibung und komme einfach nicht zu rande.

    Wenn du auf meine Seite gehst und auf Psakoudia Karte klickst dann siehst du mein Problem.

    Ich hätte gerne die Links links in der Linksliste so eingerichtet, daß da zb „Haus des Künstlers“ steht und bei Klick das Haus des Künstlers im Google Maps Fenster aufgeht.

    Wenns was kosten soll dann soll es so sein aber das ist mir die Sache wert.

    Ich finde deinen Bericht toll und würde mir wünschen das noch mehr ihre Erfahrungen so bereitwillig hergeben.

    Danke im voraus

    Jürgen Frey

  13. Ich find das ist ne gute Sache.

  14. Meinen Senf möchte ich jetzt auch noch dazu geben. ;-) Das Thema Google Maps API ist nicht mehr ganz neu. Es gibt mittlerweile sehr viele Anwendungen in diesem Bereich. So lassen sich solche Karten ohne Programmierkenntnisse schon zusammenstellen. Der Artikel hier ist schon ok, aber brandneu ist das Thema eben nicht mehr. :-)

  15. @Runa: Das glaub ich dir, wenn man noch gar nichts mit Javascript gemacht hat, dann kann das schon etwas verwirrend werden.
    Am Besten kommst du vielleicht, wenn du dir die einzelnen Javascript-Dateien ansiehst (zu jeder Version ist im Artikel ein extra-Link) und NUR auf die Änderungen achtest, die im Artikel nochmal beschrieben sind.

  16. @Runa: Java ist etwas völlig anderes als Javascript. Eine verbreitete Falschinformation.

  17. Ich hab nochmal „Bildunterschriften“ unter die Bildchens gemacht, in denen der Bezug („Attribution“) zu Google nochmal sichtbar wird.
    Bliebe natürlich noch, wie Helmut schreibt, wenn das Bild ohne textlichen Zusammenhang gesehen wird…
    Das wäre eigentlich ein Extra-Thema wert, aber da bin ich nicht so informiert.

  18. Lieber Thomas Weise,
    vielen Dank für die Mühe. Deine erste Lektion habe bereits umgesetzt, beim diesem zweiten Teil bin ich ein wenig überfordert. Wenn man sonst nicht mit java umgeht, versteht man nicht genau, was man machen sollen.

    Nutzungsbedingungen auf deutsch: http://www.google.com/intl/de_ALL/help/terms_maps.html

  19. @Schmidt
    Also dein erstes Bild ist wohl ev. OK
    Die anderen für sich denke ich nicht.

    Wird ja wirklich sehr gut anhand der Samples erklärt was sie haben wollen. Eben NICHT dass man Ihr Logo und die Copyright-Bedingungen nicht sichtbar macht.

    So wie ich das bisher in Erinnerung habe, ist Google ja auch nicht selber im Besitz des Kartenmaterials.
    Das ‚Map Data Teleatlas Sample‘ zeigt dies ja auch.

    Also ist Google selber auch nur Lizenzbesitzer und gebunden an die Richtlinien von ‚Teleatlas‘ oder wem auch immer.
    Und daher wohl auch die Richtlinie, dass das lesbar sein muss …

    Im Zusammenhang mit einer Bildersuche von Google selbst könnte es also nun dazu kommen, dass dein 2tes 3tes und 4tes bild in der Google Bildersuche auftaucht. Völlig aus dem Zusammenhang deines Artikels gerissen.
    Tja und das wird dann wohl TeleAtlas nicht so recht sein.
    Also ich wär da vorsichtiger.

    Trotzdem VIELEN LIEBEN DANK für den Artikel. Mir war bisher nicht klar, dass man Abzüge von Google Maps überhaupt wo einsetzen darf ;-)

    lg
    Helmut

  20. @helmut: Sehe ich nicht so. Erstens ist im Artikel nicht von Screenshots die Rede und die Demo zeigt auch keinen Screenshot, zweitens steht deutlich zu sehen unten Links „Google“. „Attribution“ ist IMHO gegeben. Das ist ein ganz normales GoogleMaps-Mashup, wie es ausdrücklich erlaubt ist. So sehe ich das jedenfalls :)

    PS: Wenn Du die Bilder in diesem Artikel meinst: Dass die Bilder wohl Inhalte aus GoogleMaps darstellen dürfte wohl unzweifelhaft sein, da es zig-mal erwähnt wird.

  21. Na da verstoßt Ihr aber schon gegen die Richtlinen.
    Ihr habt wohl eher:
    Not Permitted – Screenshot example with no attribution

    lg
    Helmut

  22. Das läuft bei Google ein wenig anders als bei traditionellen Kartenverlegern. Die sind tatsächlich recht streng, was die Nutzung ihres Materials angeht. Ist auch nichts gegen zu sagen finde ich.

    Google ist etwas lockerer. Wie locker, ist hier http://www.google.com/permissions/geoguidelines.html auf englisch nachzulesen. Wer das auf deutsch haben will, lässt es sich per Babelfish übersetzen (und hofft, dass er was versteht) oder macht einen Themenvorschlag auf

  23. Ich denke Geralt meint die Abbildung von (geschütztem) Kartenmaterial als Screenshot also mittels IMG-TAG. Dafür gabs an anderer Stelle schon einmal böse Briefchen von Anwälten.

  24. Was sollte im Allgemeinen daran bedenklich sein Google Maps einzubinden?

  25. Rechtlich unbedenklich diese Art der Einbindung?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.