jQuery von Kopf bis Fuß (German Edition)

einiger im Code definierter Parameter eine neue Instanz des
map
-Objekts von Google Maps. Das neue
map
-Objekt wird daraufhin auf das HTML-Element mit der ID
karten_container
angewandt. Aktualisieren Sie außerdem die Datei formular.css mit ein paar Stildefinitionen für den Container, der die Karte enthält.
    Es gibt keine: Dummen Fragen
    F:
F: Was machen das
LatLng
-Objekt und die
mapOpts
-Eigenschaft?
A:
A: Nähere Informationen zu den Objekten und Methoden der API und anderem finden Sie unter http://code.google.com/apis/maps/documentation/javascript/reference.html . Auf dieser Website finden Sie Codebeispiele und weitere Details zu den verschiedenen Objekten und Methoden, die für die Benutzung der Google Maps-API gebraucht werden.
F:
F: Gibt es Alternativen zu Google Maps für die Erstellung von Karten?
A:
A: Selbstverständlich! Da Google Maps aber momentan am beliebtesten ist, benutzen wir es hier. Andere Firmen wie Yahoo!, Microsoft, MapQuest und OpenLayers stellen ebenfalls APIs zur Verfügung.
    Probefahrt
    Bauen Sie die mit den Magneten erstellte
initialisieren
-Funktion in die Datei karten.js ein. Stellen Sie außerdem sicher, dass karten.js in einzel_anzeige.html eingebunden wird. Sie sollten Ihren Code von einem Webserver aus ausführen. Die URLs müssen also mit http:// anstelle von file:// beginnen.
    Genau.
    In Kapitel 9 haben Sie erfahren, wie Sie mit jQuery, Ajax, JSON und MySQL Informationen aus einer Datenbank abfragen können. Auch wenn die Liste der eingesetzten Technologien recht lang ist, entsprach das Ergebnis genau unseren Erwartungen. Wir wollen sehen, wie wir dieses Wissen für die aktuelle Situation weiterverwenden können.

JSON-Daten mit PHP und SQL erzeugen
    In Kapitel 9 haben Sie erfahren, wie Sie mit einer SQL-
SELECT
-Anweisung die gewünschten Informationen aus einer Datenbank auslesen können. Außerdem haben wir Ihnen gezeigt, wie die Daten in der PHP-Datei in ein JSON-Objekt umgewandelt wurden, das per Ajax angefordert wurde.
    Um per PHP ein JSON-Objekt zu erzeugen, können wir einfach die Funktion
json_encode
verwenden. Übergeben Sie der Funktion ein Array als Parameter, erhalten Sie die Daten JSON-kodiert zurück und jQuery kann sie weiterverarbeiten.

    Den PHP- und SQL-Code für dieses Kapitel haben wir bereits für Sie geschrieben. Solange Sie mit der MySQL-Datenbank aus Kapitel 10 arbeiten, können Sie direkt loslegen. Den übrigen SQL- und PHP-Code, den Sie natürlich auch auf Ihrem eigenen Server ausprobieren können, finden Sie in den Downloads für dieses Kapitel. Die nötigen Dateien befinden sich unter http://thinkjquery.com/chapter11/end/service.zip .
    Bringen Sie die Magneten in die richtige Reihenfolge, um die Dateien einzel_anzeige.html , formular.css und karten.js zu aktualisieren. Die Daten sollen per JSON vom Server abgefragt und auf dem Bildschirm angezeigt werden. Erweitern Sie die HTML-Datei um ein
div-
und ein
ul
-Element, in die die Daten eingefügt werden. Geben Sie die nötigen CSS-Regeln für die Darstellung der Liste an und definieren Sie eine Funktion für Datenabfrage per JSON und das Einfügen eines Kryptiden in die Liste.
    jQuery-, HTML- und CSS-Codemagneten: Lösung
    Bringen Sie die Magneten in die richtige Reihenfolge, um die Dateien einzel_anzeige.html , formular.css und karten.js zu aktualisieren. Die Daten sollen per JSON vom Server abgefragt und auf dem Bildschirm angezeigt werden. Erweitern Sie die HTML-Datei um ein
div-
und ein
ul
-Element, in die die Daten eingefügt werden. Geben Sie die nötigen CSS-Regeln für die Darstellung der Liste an und definieren Sie eine Funktion für Datenabfrage per JSON und das Einfügen eines Kryptiden in die Liste.
    Probefahrt
    Erweitern Sie die Datei karten.js um die gerade erstellte Funktion
alle_sichtungen_abfragen
. Bauen Sie außerdem am Ende der
initialisieren
-Funktion einen Aufruf der neuen Funktion ein. Danach sollten Sie einzel_anzeige.html im Browser öffnen. Wir gehen davon aus, dass Sie Ihrer Datenbank am Ende von Kapitel 10 bereits einige Kreaturen hinzugefügt haben. Falls nicht, sollten Sie das jetzt tun. Denken Sie daran, den Code vom Webserver auszuführen. Die URL sollte also anstelle von file:// mit http:// beginnen.
    Richtig. Wir müssen die Kryptidendaten noch auf der Karte anzeigen.
    Google Maps stellt dafür eine recht einfache Methode zur Verfügung. Die wollen wir uns einmal genauer ansehen.

Punkte auf der Karte markieren
    Wenn es darum geht, bestimmte Orte auf einer Karte