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.