
Unter olbertz.de/jquery/googlemap.html habe ich mal ein kleines Beispiel für das Zusammenspiel von jQuery und Google Maps zusammen gestellt.
Die HTML-Datei selbst enthält kein Javascript, die Zuordnung von Aktionen (z.B. Mausklick) zu Java Script-Funktionen findet nur in olbertz.de/jquery/googlemap.js statt.
Dabei muss ich eine Einschränkung zugeben: ich habe es nicht geschafft, den onclick-Event für die Links auf die Locations, die ich in der Funktion processLocations() erzeuge, mittel jQuery zu setzen. Damit hatte ich mich dann aber auch nicht mehr so lange auseinander gesetzt.
Die locations.php gibt, in JSON kodiert, die Daten aus der Datenbank zurück an die Website und nimmt auch neue Locations entgegen. Das ganze wird mit den jQuery AJAX-Methoden $.get() und $.post() realisiert. Nach dem Aufruf erhält die Callback-Funktion den Inhalt der Rückgabe (hier die Locations in JSON kodiert). Da es sich um JSOn handelt, werden die Daten durch ein einfach eval() von JS der Seite bekannt gemacht.
Die Funktionalität des Beispieles ist sehr einfach: Bei Klick auf die Locations in der Liste rechts, wird die Karte in der aktuellen Zoomstufe auf diese Location zentriert. Über New kann eine neue Location angelegt werden. Dazu klickt man einfach an der gewünschten Stelle auf die Map (erst New klicken!) und gibt ihr anschließend einen Namen, bevor man sie mit Save in der Datenbank abspeichert. Es werden immer nur die letzten 10 Locations angezeigt.
Die Quelltexte des Beispiel sind auf der Demo-Seite verlinkt.
Ein klein wenig Statistik: Die Demo besteht aus insgesamt 145 Zeilen Code, die ich schreiben musste. Dabei entfallen 34 Zeilen auf HTML, 86 auf das Java Script und 25 auf PHP.
(Warum die Demo-Seite nicht im Safari läuft, kann ich im Moment leider nicht beantworten. So, jetzt läuft’s auch mit Safari. Man sollte immer daran denken, ein </script> zu setzen, sonst ignoriert Safari die Zeile einfach.)