Ein resourcenschonender Marker für Google Maps: die SimpleMarker Klasse

Seit einiger Zeit arbeite ich sehr oft mit der Google Maps API V3. Oftmals möchte man eine hohe Anzahl an Markern anzeigen, allerdings sind die standard google.maps.Marker gänzlich ungeeignet für diese Aufgabe. Befinden sich viele davon auf einer Karte, wird die gesamte Applikation sehr langsam. Aus diesem Grund wurde das Konzept der resourcenschonenden Marker (auch "Lightweight Marker" genannt) entworfen. Im Grunde genommen implementiert man eine abstrakte Klasse für Overlays und hält dabei die DOM-Struktur des Markers so einfach wie nur möglich. Es gibt etliche Varianten solcher Marker, manche mit mehr und manche mit weniger Funktionen.

Meine Implementation beschränkt sich auf die absoluten Grundfunktionalitäten eines Markers. In der DOM Hierarchie besteht der Marker aus einem einzigen div-Element. Man kann einen OnClick-Listener hinzufügen, und ein paar Parameter anpassen. Der Konstruktor des SimpleMarkers sieht wie folgt aus:

SimpleMarker(
  map: google.maps.Map,
  position: google.maps.LatLng,
  opts?: SimpleMarkerOptions)

Hierbei besteht SimpleMarkerOptions aus folgenden Parametern:

  • id: String
    Ein eindeutiger Bezeichner, der den Marker identifiziert. Das div-Element erhält ebendiesen Bezeichner als ID
  • image: String
    Der Pfad zu einem Bild, welches als Markergrafik dargestellt werden soll
  • dimension: google.maps.Size
    Die Größe des Markers in Pixel
  • anchor: google.maps.Point
    Der Punkt (in Pixel) im Marker, welcher mit der LatLng-Position verknüpft werden soll
  • classname: String
    Ein Bezeichner, der als Klassenattribut des div-Elements gesetzt wird
  • title: String
    Ein Text, der als Tooltip angezeigt wird, wenn der Benutzer mit der Maus über den Marker fährt

Alle Parameter sind mit Vorgabewerten gefüllt und somit optional. Daraus folgt auch, dass man einen einfachen Marker mit einer einzigen Zeile erstellen kann:

new SimpleMarker(jMap, new google.maps.LatLng(50.7658, 6.1059));

Zusätzlich zu den grundlegenden Funktionen zum holen und setzen der Position habe ich noch eine getBounds() Methode implementiert, die in Kombination mit einer Clustering Engine sehr nützlich sein kann. Ich werde meinen eigenen Clusterer in den nächsten Tagen hier präsentieren. Sie können eine Demonstration des SimpleMarkers auf folgender Seite betrachten: SimpleMarker Demonstration auf demo.k621.de.

Der folgende Code erstellt einen Marker mit einem individuellen Aussehen:

new SimpleMarker(
  jMap,
  new google.maps.LatLng(50.7572, 6.1453),
  {
    id: 'myMarker',
    image: 'greendot.png',
    dimension: new google.maps.Size(48,48),
    anchor: new google.maps.Point(24,24),
    title: 'Simple, isn\'t it?'
  }
);

Nun besitzt das div-Element ein eigenes Bild und einen Tooltip, der dem Benutzer angezeigt werden kann. Weiterhin erhält das Element die durch den id Parameter spezifizierte ID. Dadurch kann man beispielsweise einen CSS-Stil speziell für diesen Marker festlegen, um das Aussehen des Markers noch weiter zu beeinflussen (z.B. durch Einsatz des CSS3 box-shadow Attributs, wenn man einen einfachen Schlagschatten möchte). Möchte man das Aussehen einer ganzen Reihe von Markern beeinflussen, kann man anstelle des ID Attributs auch die CSS Klasse setzen. Zu beachten ist, dass die Attribute width, height, left, top und background-image bei der Initialsierung vom Code überschrieben werden. Man kann das Überschreiben durch setzen des !important-Flags verhindern, dabei könnte allerdings die Funktionalität des Markers beeinträchtigt werden.

Ich habe sowohl eine komprimierte als auch unkomprimierte Version des SimpleMarker-Codes angehängt. Die Verwendung ist sehr einfach: Sie müssen einfach nur das Skript in Ihre Webseite einbinden und können sofort loslegen. Weitere Details befinden sich in den Kommentaren der unkomprimierten Version. Werfen Sie auch einen Blick auf den Quellcode des oben genannten Beispiels, falls die Verwendung noch nicht ganz klar ist. Sollten Sie Fehler finden oder Vorschläge haben, bitte senden Sie mir eine E-Mail!

Anhänge