matblog
Home Header
Homepage » JavaScript
  • Montag, 1. Mai 2006, 22:56
  • Google Maps API "Tutorial" Nr. 1
  • Kategorie: Internet , Webseiten , Programming , Diplomarbeit , Web2.0 , Tutorials , JavaScript
  • Im Rahmen meines Diploms muss ich mich ja zwangsläufig mit der API von Google Maps beschäftigen. Dies werde ich gleich mal in ein Tutorial ummünzen, falls es Jemanden interessiert, kann er meine Schritte leicht nachvollziehen.

    Ein Tutorial einerseits, damit ich für mich weiß, ob ich es verstanden habe, andererseits als Nachschlagewerk für mich selbst, während der Diplom Schreiberei.

    Folgende Beispiele habe ich schon mal online:

  • Hier nun das "Tutorial" für das einfache Einbinden einer Karte, sowie das anlegen eines Markers. Das Beispiel Anlegen neuer Marker und Anzeige des Längen- und Breitengrades in einem Info Fenster ist nochmals genau dokumentiert. Einfach den Quelltext ansehen.

    Um eine Karte mittels API in eine Webseite einzubauen benötigt man einen Google Maps Api Key. Diesen bekommt man auf der Internetseite http://www.google.com/apis/maps/signup.html. Der API-Key ist an jeweils einen Ordner auf einem Server gebunden. So ist es bspws. möglich den selben Schlüssel unter diesesn URL’s einzusetzen:

    http://www.meinserver.com/maps/index.php
    http://www.meinserver.com/maps/map.html


    Es ist jedoch nicht möglich den Schlüssel auf Subdomains oder Subordner anzuwenden. Folgende Beispiele würden fehlschlagen und die Fehlermeldung

    „The Google Maps API key used on this web site was registered for a different web site. You can generate a new key fort his web site at http://www.google.com/apis/maps/.“


    verursachen:

    http://subdomain.meinserver.com/index.html
    http://www.meinserver.com/maps/berlin/index.php


    Die Karte wird durch JavaScript und HTML in das Internetdokument eingebunden. Auf HTML-Seite braucht man dazu einen <div>-Tag, dessen Breite und Höhe über Stylesheets definiert werden, z.B.:


    <div id="map" style="width: 800px; height: 600px"></div>

    Im <head> des Dokumentes wird eine auf dem Google Server liegende JavaScript Bibliothek eingebunden

    <script src=http://maps.google.com/maps?file=api&v=2&key=[GOOGLE_MAPS_API_KEY] type="text/javascript">
    </script>

    Dadurch lassen sich die von Google für die Karte definierten Objekte aufrufen. Die übergebenen Parameter spezifizieren die benötigte Umgebung. Über den Parameter „file“ wird die API aufgerufen, v=2 steht für die Version 2.0 der API und mit key wird der Google Maps API Key übergeben.

    Die Bibliothek wird dann über die Funktion load() geladen. Dies geschieht im <body>-Tag.

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

    Die Funktion GUnload() dient dazu den Speicher des Browsers nach Beendigung der Webseite wieder freizugeben.

    Nach einer Abfrage, ob der Browser kompatibel ist zu Google Maps erfolgt die eigentliche Generierung der Karte. Dazu wird ein neues Google Maps Objekt erzeugt. Dem Objekt lassen sich dann verschiedene Eigenschaften zuweisen. Exemplarisch dazu ein Beispiel:

    var map = new GMap2(document.getElementById("map"));
    var point = new GLatLng(52.5531, 13.3857);
    map.setCenter(point, 16);
    map.addControl(new GSmallMapControl());
    var marker = new GMarker(point);
    map.addOverlay(marker);

    Als Parameter wird dem Objekt der Name des Elementes übergeben, der die Karte halten soll. Das Objekt selbst wird in einer Variablen gespeichert. Ein Punkt auf der Karte wird über das Objekt GLatLng festgelegt. Dieses erhält als Parameter den Breitengrad und den Längengrad des Ortes.

    Die Karte wird zentriert über den Aufruf setCenter([Koordinaten], [Zoom-Level]). Hier wird auch der Zoom-Level angegeben. Je nach gewünschtem Zoom stellt Google hierfür 18 Zoom-Level bereit.

    Über addControl() kann die Kontrolle zur Navigation eingebunden werden. Als Parameter wird ein Objekt übergeben. Zum Zeitpunkt der Erstellung dieser Arbeit gab es fünf verschiedene Kontroll-Objekte.

    Ein Marker wird über das Objekt GMarker erzeugt. Es benötigt als Parameter die Koordinaten des zu markierenden Punktes. Mittels der addOverlay-Funktion wird der Marker der Karte hinzugefügt.
  • yigg Logo Yigg this! | yigg Logo del.icio.us | Mr. Wong Logo Wong it!

    Eintrag per eMail verschicken

    Kommentare (3) ⇒ Kommentar schreiben
    Trackback (1) ⇒ Trackback für spezifische URI dieses Eintrags
    Tags für diesen Artikel: , , , , ,
    Similar entries by tags:
    Man spricht Deutsch
    Ritchie Hawtin schlecht
    Frankfurt ist geil
    Notizen machen mit Google
    ASCII-Maps
    • Tell-A-Friend:
  • Trackbacks:
  • Trackback für spezifische URI dieses Eintrags
  • Trackback: Die oberen 10.000
    Weblog: matblog
    21.07.2006 um 03:50
  • Darauf wird angestoßen. So, die 10.000er Grenze ist überschritten. 10.000 Besucher in den ersten 3 Monaten. Vor fast genau 3 Monaten gabe es den ersten Eintrag hier im matblog. Dem stehen 15.800 Seitenaufrufe gegenüber. Alleine diese Woche kamen bisher
  • Kommentar Nr. 1
    von freak (URL)
    04.10.2006 um 21:10
  • ich habe auch ein kleines einführendes google maps tutorial geschrieben. findet man hier: http://www.tripthelightfantastic.de/content/googlemaps.html (Antwort)
  • Kommentar Nr. 2
    von grunet (URL)
    06.11.2006 um 10:30
  • Kann mir jemand verraten wie ich meine Google Map direkt im Satellite View starten kann? (Antwort)
  • Kommentar Nr. 2.1
    von Matthias (URL)
    09.11.2006 um 22:57
  • Hallo,
    probiers mal mit

    myMap.setMapType(G_SATELLITE_TYPE) (Antwort)
  • post a comment

  •