öffentlich
Redaktion Druckversion

Google Maps für Ihre Website

4.833335
(6)
Beitrag bewerten
Kommentar schreiben
Stand: 30. August 2010

Eine erste Karte mit der Google Maps API

Als zweites: Die eigentliche Karte per Google Maps API einbinden

Jetzt fehlt aber noch die eigentliche Karte. Hierfür binden Sie zuerst im Kopfbereich die JavaScript-API ein:

<head>
<!-- Andere Angaben wie Seitentitel bleiben wie gehabt -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</head>

API-Schlüssel wird nicht mehr benötigt!

In früheren Versionen der Google Maps API benötigten Sie noch einen API-Schlüssel. Dieser wird für die Version 3 nicht mehr gebraucht.

Die API binden Sie über ein script-Element ein. Bei src steht der (vorgegebene) Pfad zur API. Nach einem Fragezeichen wird der Parameter sensor erwartet. Schreiben Sie sensor=true, falls Sie einen Sensor nutzen, um den Standort des Benutzers zu ermitteln. Ansonsten nehmen Sie false wie im Beispielcode.

Der Parameter "sensor" ist Pflicht!

Der Parameter sensor müssen Sie angeben. Andernfalls erhalten Sie eine Fehlermeldung und die Karte wird nicht angezeigt.

Nach </script> folgt ein weiterer script-Bereich, über den die Karte erstellt wird. Er beinhaltet mehrere Zeilen Code:

<script type="text/javascript">
function initialize() {
  var latlng = new google.maps.LatLng(48.13675, 11.57632);
  var myOptions = {
    zoom: 16,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("karte"), myOptions);
}
</script>

Gehen wir den Code des Beispiels zeilenweise durch. (Wie Sie die nachfolgend beschriebenen Festlegungen für Koordinaten, Zoomfaktor etc. für Ihren eigenen Bedarf vornehmen und welche Möglichkeiten Sie dabei haben, dass erfahren Sie dann gleich im nächsten Abschnitt "Die Karte anpassen".)

<script type="text/javascript">

leitet den Scriptbereich ein. Alles, was hier steht, folgt jetzt nicht mehr den Regeln von HTML, sondern denen von JavaScript.

function initialize() {

Erstellt eine Funktion, die die Karte initialisiert. Der Inhalt der Funktion, also das, was sie machen soll, steht in geschweiften Klammern. An dieser Stelle geht die geschweifte Klammer auf.

var latlng = new google.maps.LatLng(48.13675, 11.57632);

Hiermit definieren Sie die Koordinaten des Mittelpunktes, der auf der Karte angezeigt wird. Die beiden Zahlenangaben in Klammern sind Breitengrad und Längengrad. Im Beispiel wurden die Koordinaten des Münchner Marienplatz gewählt.

var dient in JavaScript dazu, Variablen zu definieren.

Über new google.maps.LatLng() wird ein Koordinatenpunkt definiert, wobei in runden Klammern durch Komma getrennt Breiten- und Längengrad angegeben werden. Dass Koordinatenpunkte so erstellt werden, ist von der Google Maps API festgelegt.

Jetzt wird ein Objekt mit Optionen für die Karte erstellt:

var myOptions = {
  zoom: 16,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
  • zoom: 16 bestimmt den Zoomfaktor. Je höher der Faktor, desto mehr Details sind zu sehen.

  • center: latlng setzt das Zentrum der Karte auf die eben definierten Koordinaten.

  • mapTypeId: bestimmt den Typ der Karte. In diesem Fall wird die Straßenkarte angezeigt.

Die nächste Zeile erstellt die Karte:

var map = new google.maps.Map(document.getElementById("karte"), myOptions);

Über document.getElementById("karte") wird für die Karte das Element mit der id="karte" ausgewählt.

Sie erinnern sich, unser HTML-Grundgerüst enthält ein <div id="karte"></div> für die Karte?

Schließlich wird über myOptions auf das Objekt mit den Karteneigenschaften zugegriffen, das vorher definiert war.

Als Letztes steht die schließende geschweifte Klammer:

}

Klammern immer als Paar!

Zu jeder öffnenden Klammer gehört auch eine schließende. Diese schließende Klammer gehört zur öffnenden Klammer hinter function initialize() {.

Und das script-Element wird geschlossen:

</script>

Damit ist die Funktion zur Erstellung der Karte perfekt. Allerdings machen Funktionen erst einmal nichts - bis man sie aufruft. Die Funktion im Beispiel soll aufgerufen werden, wenn das Dokument geladen wurde. Deswegen ergänzen Sie im body-Start-Tag noch einen Eventhandler onload:

<body onload="initialize()">

Hinter onload geben Sie den Namen der soeben definierten JavaScript-Funktion an.

JavaScript-Hinweise

JavaScript ist eine Skriptsprache, die im Browser (Client) ausgeführt wird. In JavaScript gibt es - so wie in anderen Programmiersprachen auch - Variablen oder Funktionen. JavaScript folgt einer bestimmten Syntax, die Sie beachten müssen. So steht nach einer Anweisung ein Strichpunkt und Anweisungsblöcke werden in geschweiften Klammern zusammengefasst.

Browser sind bei der Ausführung von JavaScript pingelig: Wenn Sie an einer Stelle eine geschweifte Klammer vergessen, wird der Code ab dieser Stelle einfach nicht mehr ausgeführt. Deswegen müssen Sie beim Abschreiben des Codes ganz exakt sein. Eine gute Möglichkeit ist es auch, die Beispiele zu kopieren und dann gezielt die notwendigen Änderungen vorzunehmen.

Noch einmal der Tipp: Für eine rasche Einarbeitung in JavaScript empfiehlt sich der "Schnellkurs" "JavaScript lernen".

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren