Google Maps API

14. Januar 2010

Nachdem ich mich die letzten 2 Wochen mit Google Maps rumgequält habe, und dabei feststellen musste, dass die Doku von Google mehr als schwach ist, wollte ich mir ein paar wichtige Erkenntnisse hier festhalten.

Icons: icon.imageMap

Erstellt man sich eigene Marker, ist es angebracht, auch den klickbaren Bereich selbst zu definieren. Ich musste beispielsweise die Standard Marker durch verhältnismäßig große Icons mit Text ersetzen. Ohne imageMap zu definieren war im Firefox dann aber nur ein kleiner Bereich anklickbar. Das setzen von imageMap ist allerdings gar nicht so einfach, denn die Google Doku hat dazu folgende nützliche Hinweise: “Ein Array von Ganzzahlen, die die x/y-Koordinaten der Bildkarte repräsentieren, die zum Angeben des anklickbaren Teils des Symbolbilds in anderen Browsern als Internet Explorer verwendet werden sollten.” Ein schlichtes Beispiel würde schon genügen, um deutlich zu machen, wie man diese “x/y-Koordinaten” denn nun genau angeben soll. Ich musste allerdings eine Viertelstunde googeln, bevor ich auf ein solches Beispiel gestoßen bin.

Daher hier ein konkretes Beispiel für ein selbsterstelltes Icon inklusive imageMap Definition:

  1. theIconEuropa_de = new GIcon(G_DEFAULT_ICON);
  2. theIconEuropa_de.image = "../img/marker_europa.png";
  3. theIconEuropa_de.iconSize = new GSize(133, 40);
  4. theIconEuropa_de.iconAnchor = new GPoint(65, 20);
  5. theIconEuropa_de.imageMap = [0,0 , 133,0, 133,40 , 0,40];

Mein Icon hat die Abmessungen 133x40px und ich möchte die gesamte Fläche klickbar machen. Ich gebe also vier Koordinaten an für vier Punkte des Rechtecks: links oben (0/0), rechts oben (133/0), rechts unten (133/40) und links unten (0/40). Und da soll wer draufkommen, wenn Google sich nicht mal bequemt, ein Beispiel zur Verfügung zu stellen. *kopfschüttel*