201006Jul

Webentwicklung: jQuery-Plugin für interaktive Karten

Auf vielen Websites ist die Einbindung eines Google Maps-Bereichs mittlerweile selbstverständlich. Für individuellere Karten, die interaktive Bereiche oder Punkte enthalten, bietet sich Flash sehr gut an. Wer eine solche Karte mit jQuery realisieren möchte, sollte sich das Plugin ZoomMap ansehen. Dabei handelt es sich um eine spezielles Skript, das für den Zweck ausgelegt wurde, interaktive und vergrößerbare Karten zu erstellen. Dabei können zudem Punkte definiert werden, die etwa per Klick Zusatzinformationen einblenden. Ein sehr schönes Beispiel, das mit dem jQuery-Plugin realisiert wurde, findet sich auf dieser Seite.

A jQuery Plugin for Zoomable, Interactive Maps

Das Skript nutzt ein Hintergrundbild für die Darstellung der Karte — klickbare Elemente werden mit Platzhalter-Bereichen versehen und können in den Optionen des Plugins definiert werden. Ein einfacher Aufruf des Plugins sieht etwa so aus:

  • $("#karte").zoommap({
  • width: "500px",
  • height: "580px",
  • blankImage: "images/blank.gif",
  • map: {
  • // Struktur der Karte
  • }
  • });

Da es sich um ein komplexes Plugin handelt, werden auch bei der Implementierung einige Einstellungen benötigt. Eine detaillierte Anleitung findet sich aber auf der Website des Entwicklers. Dort gibt es zudem ein einfaches Beispiel, welches durch den Quelltext Aufschluss über die Einrichtung des jQuery-Plugins gibt.

RSS-Feed abonnieren Bookmark bei Del.icio.us