Websiteentwicklung: AJAX: Google Maps verwenden
Google Maps ist eine ausgereifte Applikation, die sehr viel AJAX verwendet. Über die Google Maps API (Programmierschnittstelle) kann man diese Applikation in eigenen Webseiten oder Web-Applikationen einbinden. Im einfachsten Fall - Landkarte anzeigen - ist das eine Arbeit von 5 Minuten.
Die Benutzung der Maps API ist derzeit kostenlos. Wenn man die Landkarte unter der Domain http://www.beispiel.at online stellt, muss man sich zuerst von Google einen dazu passenden Key geben lassen - das ist einfach eine Zeichenkette, die dann in einer Variable im Programm gespeichert wird.
Zum Testen Ihrer Webseite brauchen Sie keinen Webserver. Sie können die Datei im Browser direkt öffnen, so dass der Browser als Adresse eine URL anzeigt, die mit file:/// beginnt. Das hat den Vorteil, dass Sie dafür noch keinen API-Key brauchen. Wenn die URL mit http:// beginnt, z.B. http://localhost/, brauchen Sie einen Key.
Die Dokumentation zu dieser API ist derzeit nur auf Englisch erhältlich.
Eine erste Landkarte
BearbeitenDas erste Beispiel lädt die Landkarte von Salzburg in eine div namens karte.
<script src="http://maps.google.com/maps?file=api&v=2&key=ichbinkeinkey"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function karteladen() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("karte"));
map.setCenter(new GLatLng(47.810001, 13.039999), 9);
}
}
//]]>
</script>
</head>
<body onload="karteladen()" onunload="GUnload()">
<div id="karte" style="width: 500px; height: 300px"></div>
In der ersten Zeile wird Javascript vom Google-Server geladen. Hier sehen Sie die Stelle an der Sie den Key angeben können falls Sie die Seite dann auf einem Webserver veröffentlichen wollen.
Die selbstgeschriebene Funktion karteladen verwendet mehrere Befehle
aus der Google Maps-API: Zuerst wird getestet ob der Browser überhaupt zu
Google Maps kompatibel ist. Dann wird eine neue Landkarte auf Basis
der div karte erzeugt. Anschließend wird diese Landkarte auf einen bestimmten
Punkt (in Längen- und Breitengrad) zentriert. Die Zahl 9 gibt den Zoom-Level
an, also wie groß der Kartenausschnitt ist. Mögliche Werte sind 1 bis 14.
Die Karte sieht zwar statisch aus, bietet aber schon Interaktions-Möglichkeiten: die LeserIn kann mit der Maus die Karte ziehen, und so einen anderen Kartenausschnitt wählen.
Landkarte steuern
BearbeitenBisher wirkte die Landkarte statisch. Damit die LeserIn weiß, dass Sie rein- und raus-zoomen kann, bringen wir nun Steuerelemente an:
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.enableScrollWheelZoom();
Mit dem zweiten Steuerelement kann die LeserIn zwischen Satelliten-Karte
und Straßen-Karte hin und her schalten.
Mit map.enableScrollWheelZoom() wird das Zoomen mit dem dem Mausrad ermöglicht.
Links
Bearbeiten
