Eine erste Karte
Zunächst einmal ein Blick auf den kompletten Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Karte</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15" />
<script src="http://maps.google.com/maps?file=api&v=2&key=[Schlüssel]" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var mapcenter = new GLatLng(47.43985278, 11.69574722);
map.setCenter(mapcenter, 13);
}
}
/* ]]> */
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="margin:0px; padding:0px">
<div id="map" style="width:380px; height:285px"></div>
</body>
</html>
Im einzelnen sind folgende Schritte notwendig:
-
Ersetzen Sie den Eintrag
[Schlüssel]durch den von Google bereitgestellten Schlüssel. -
Mittels
var point = new GLatLng(47.43985278, 11.69574722);definieren Sie die Koordinaten, des Ortes, der angezeigt werden soll.
Zunächst die Breite (Nord, Süd), dann die Länge (Ost, West). Wie zu erkennen ist, werden die Daten im GPS-Format eingegeben. Achten Sie auf die englische Schreibweise für die Dezimalzahlen (Punkt statt Komma.)
Einen Konverter, um Koordinaten von Grad, Minuten, Sekunden in GPS-Koordinaten umzurechnen, finden Sie hier. -
Mit
map.setCenter(point, 13);wird die Karte bei den angegebenen Koordinaten zentriert und mit dem festgelegten Zoomlevel (hier 13) angezeigt. -
Mit Hilfe von
onload="initialize()" onunload="GUnload()"imbody-Tag der Seite wird die Karte ge- und entladen. -
Um die Karte anzuzeigen, notieren Sie an der gewünschten Stelle
<div id="map" style="width:380px; height:275px"></div>.-
Der Name im
id-Tag muss mit dem Namen in der Zeilevar map = new GMap2(document.getElementById("map"));übereinstimmen. Im Beispiel lautet dieser "map". -
Mit
widthundheightwird die Größe der Karte bestimmt.
-
Der Name im
-
Die
style-Definitionen ("margin:0px; padding:0px") imbody-Tag dienen dazu, dass die Karte imiframe-Element ohne Rand dargestellt wird. Dies wäre insbesondere beim Internet Explorer der Fall.
