PlanetGMaps :: Die Deutsche Entwickler-Community für das Google Maps API

Hello World - Die ersten Schritte zur eigenen Karte

Als erstes benötigst Du einen einfachen Webspace. Da Google Maps komplett über JavaScript also clientseitig eingebunden wird, muss der Webspace keine besonderen Anforderungen wie PHP oder MySQL? erfüllen - einfaches HTML reicht.

Dieser Webspace wird eine Internetadresse haben, unter der die Seite zu erreichen ist (z.B. http://www.planet-gmaps.de∞). Für jede Domain, jede Subdomain und für jedes Unterverzeichnis(!), auf der man Maps einbinden will, muss man sich einen eigenen Entwickler-Schlüssel (Developer Key) holen. Google hat diese Prozedur aber so einfach wie möglich gemacht:

1. http://www.google.com/apis/maps/∞ aufrufen
2. "Sign up for a Google Maps API key" klicken
3. unten auf der Seite ein Häcken machen, die eigene URL angeben und "Generate API Key" klicken

Nun erhälst du deinen Key, welcher aus einer Zeile Buchstaben und Zahlen besteht.

Copy & Paste

Nun öffnest Du den Text-Editor Deines Vertrauens und kopierst folgenden Text dort hinein:

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=DEINKEY" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(54.33686989052731,10.119942426681519), 16);
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Dort oben, wo "DEINKEY" steht, musst Du natürlich noch Deinen Key hineinkopieren.

Diese Datei speicherst Du ab und lädst sie auf deinen Webserver. Wenn Du die Datei nun im Browser öffnest, wird Dir die Google-Karte angezeigt, eingezoomt auf das Geographische Institut der Universität Kiel.

Was passiert da?

Erstens ist das eine ganz normale HTML-Seite:

<html>
<head>

Head (Metadaten)

</head>
<body>

Body (Inhalte)

</body>
</html>

Im Head werden zwei JavaSkripte? eingebunden:
1. Der Aufruf für das API mit Deinem Key. Dadurch werden alle nötigen Funktionen in den Browser des Betrachters geladen.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=DEINKEY" type="text/javascript"></script>

2. Das zweite Skript sind die eigenen Anpassungen.

<script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(54.33686989052731,10.119942426681519), 16);
      }
    }

    //]]>
</script>

Hier wird eine neue Funktion angelegt, die load heisst und keine Wert annimmt.

GBrowserIsCompatible?() ist eine Funktion aus dem API und überprüft, ob der Browser JavaScript und die API-Funktionen unterstützt.

Wenn das so ist, wird ein neues GMap2? Object instatiiert - das heisst, die Variable "map" erfährt, dass sie nicht nur einfach eine Zahl oder ein Wort enthalten kann, sondern dass sie komplizierter ist und verschiedene Werte haben kann. Sie ist ein Objekt und dieses Map-Objekt kann zum Beispiel einen Mittelpunkt haben oder gezoomt sein usw.

Dieses Objekt hier soll, wenn die Funktion aufgerufen wird, in dem Teil des Bodys angezeigt werden, der die ID "map" hat. Das aktuelle Dokument ist immer das "document"-Objekt. Und an diesem Objekt wird die Methode "getElementById?" angewandt. Das heisst dann so viel, wie "gibt mir das Element, das "map" heisst.

Als nächstes wird an dem gerade geschaffenen Objekt "map" die Methode "setCenter?" angewandt. Diese Methode weiss, wie sie einem GMap2?-Objekt sagt, wo sein Mittelpunkt ist und wie weit gezoomt werden soll.

Dazu benötigt die Methode ein Punkt-Objekt, welches mit new GLatLng? und den beiden Werten für Länge und Breite erzeugt und gleich übergeben wird. Die letzte Zahl bestimmt den Grad des Zooms - in diesem Fall 16.

Fertig ist das Skript.

Im Body der Seite wird zum einen die Funktion aufgerufen, wenn die Seite geladen wird und zweitens beendet, wenn die Seite geschlossen wird, oder der Benutzer weitersurft. Klingt komisch, ist aber so: Das spart Speicher.

<body onload="load()" onunload="GUnload()">

Und dann gibt es da noch das Objekt mit der ID "map". In diesem Fall ein div:

<div id="map" style="width: 500px; height: 300px"></div>

Das ist genau das Tag, das document.getElementById?("map") suchte. Wie du siehst, ist es 500x300 Pixel groß. In dieses div wird die Karte geladen.

Rumspielen

Du kannst ja schon mal mit den Werten rumspielen, die Breite und Höhe des divs beeinflussen und so die Größe der Karte an Deine Bedürfnisse anpassen.

Außerdem kannst Du die Koordinaten bei setCenter? verändern und sie auf einen Dir bekannten Punkt ändern.

Am einfachsten lässt sich mit der Zoom-Stufe rumspielen. Wie groß rausgezoomt ist 1 als Wert? Und wie weit kann man reinzoomen? Gibt es noch höhere Werte als 16?

planetGMaps

Forum

aktuelle Diskussionen

Werbung

Wiki

Hello World - Die ersten Schritte zur eigenen Karte

Copy & Paste

Was passiert da?

Rumspielen