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

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