Eine 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.