DruckversionEine erste Karte mit der Google Maps API
Als erstes: Das HTML-Grundgerüst erstellen
Zuerst brauchen Sie ein HTML-Grundgerüst mit einem div-Element, das die Karte aufnehmen soll. Die gewünschten Ausmaße der Karte legen Sie dabei per CSS fest:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Die erste Karte </title>
<style type="text/css">
#karte { width: 400px; height: 400px;}
</style>
</head>
<body >
<div id="karte"></div>
</body>
</html>Vereinfachter HTML 5-Doctype - die erste Zeile
Google empfiehlt, bei Verwendung der Google Maps API die Dokumenttypdeklaration von HTML 5 zu nehmen - also <!DOCTYPE html>.
Diese vereinfachte Dokumenttypdeklaration wird schon heute von allen gängigen Browsern unterstützt und sorgt dafür, dass die Browser sich im Standard- und nicht im Quirks-Modus befinden.
Sie können statt dieser Deklaration auch eine andere HTML 4.01- oder XHTML 1.0-Dokumenttypdefinition benutzen, also beispielsweise:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
für HTML oder
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
für XHTML.
Wichtig ist im Beispiel der div-Container, der die Karte aufnehmen soll. Er ist mit einer id versehen:
<div id="karte"></div>
Über diese id können Sie gleich die Karte über JavaScript ansprechen.
Die Ausmaße der Karte legen Sie mit CSS fest:
<style type="text/css">
#karte { width: 400px; height: 400px;}
</style>Im Beispiel soll die Karte 400 Pixel breit und 400 Pixel hoch sein. Passen Sie Breite und Höhe an Ihre Wünsche an.
Dies ist eine Leseprobe
Möchten Sie den Beitrag komplett lesen? Dann werden Sie Probemitglied und testen Sie akademie.de 14 Tage kostenlos!
Auf Google Maps API: Google-Karten einbinden erfahren Sie mehr über diesen Beitrag und die weiteren Leseproben.
Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.
Ich bin bereits Mitglied