jQuery von Kopf bis Fuß (German Edition)

von Google, Twitter, Facebook und Konsorten auf unseren eigenen Websites benutzen.
    Jim:  Das klingt ziemlich cool. Aber bekommen wir damit all die Pop-ups und die anderen Sachen, die auf der Karte erscheinen sollen?
    Joe:  Zumindest sollten wir das. Vielleicht sollten wir uns die Google Maps-API einmal genauer ansehen, um zu sehen, wie sie funktioniert.

Die Google Maps-API
    Für jede API, die Sie nutzen möchten, gibt es Onlinedokumentationen und Beispielcode. Das folgende Beispiel finden Sie unter http://code.google.com/apis/maps .
    var map;
function initialisieren() {
var myLatlng = new google.maps.LatLng(40.720721,-74.005966);
var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("karten_container"), myOptions);

google.maps.event.addListener(map, 'zoom_changed', function() {
    setTimeout(moveToNewYork, 3000);
});

var marker = new google.maps.Marker({
     position: myLatlng,
     map: map,
     title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
});
}

function moveToNewYork() {
var NewYork = new google.maps.LatLng(45.526585, -122.642612);
map.setCenter(NewYork);
}

    Das ist Code von Google.
    Das ist gar nicht so schlimm, wie es aussieht. Lassen Sie uns den Code etwas näher betrachten.

APIs verwenden Objekte
    In Kapitel 6 haben wir unsere eigenen Objekte erstellt. Sie besaßen Eigenschaften und Methoden, um ganz nach Bedarf Informationen zu speichern und abzurufen. Viele Firmen erstellen API-Objekte, über die wir mit den zur Verfügung gestellten Daten arbeiten. Falls Sie eine kleine Gedächtnisstütze benötigen, können Sie jederzeit zurückblättern und sich noch einmal mit Objekten und ihrer Funktionsweise vertraut machen.

    Weil dadurch alles schneller geht.
    Wie wir bereits in Kapitel 6 gesehen haben, ist die Speicherung von Daten in Objekten deutlich vielseitiger. Sie können Objekte verwenden, um mehrere Daten für eine bestimmte Sache zu speichern. Eine API besteht im Prinzip nur aus einer Reihe von Objektk onstruktoren , mit denen Sie Ihre eigenen Instanzen der Objekte anderer Leute anlegen können. Sobald Sie Ihre eigene Instanz des Objekts haben, können Sie sämtliche Eigenschaften und Methoden in Ihrem Code verwenden, die mit dem Objekt verbunden sind.
    Die Schwierigkeiten, eine für alle benutzbare Kartenapplikation zu schaffen, sind ziemlich groß. Durch die Verwendung von Objekten in seiner API kann Google Objekte mit vielen verschiedenen Methoden und Eigenschaften für die große Zahl verschiedener Elemente erstellen, die für die Erzeugung einer interaktiven Karten nötig sind.
    Wie Sie im Code auf der vorigen Seite sehen, besitzt das
map
-Objekt die Eigenschaften
zoom
,
center
und
mapTypeId
, sowie noch einige mehr, die wir hier nicht gezeigt haben. Das Objekt besitzt außerdem Methoden wie das hier gezeigte
setCenter
.
    Tun Sie das hier!
    Erstellen Sie eine neue Datei mit dem Namen einzel_anzeige.html und speichern Sie diese im Projektordner für dieses Kapitel.

Eine Google Maps-Karte in eine Seite einbinden
    Erstellen Sie zunächst eine Kopie aller Dateien vom Ende des letzten Kapitels. Wir werden sie in dieser Lösung weiterbenutzen, damit wir nicht wieder ganz von vorn anfangen müssen. Durch diesen Code und die neue Datei einzel_anzeige.html bekommen wir zwei neue Sachen:
    Ein
div
-Element mit der ID
karten_container
Den Code für die Google Maps-API durch das Hinzufügen der Zeile
    Um eine Google Maps-Karte in Ihre Seite zu integrieren, brauchen Sie eine karten.js -Datei. In diese fügen Sie eine Funktion ein, die den API-Code aufruft, um die Karte auf Ihrer Seite zu erstellen und anzuzeigen.
    jQuery-Codemagneten
    Bringen Sie die Magneten in die richtige Reihenfolge, um eine Funktion mit dem Namen
initialisieren
zu erstellen. Diese Funktion erzeugt dann anhand 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.
    jQuery-Codemagneten: Lösung
    Bringen Sie die Magneten in die richtige Reihenfolge, um eine Funktion mit dem Namen
initialisieren
zu erstellen. Diese Funktion erzeugt dann anhand