Google Maps Tutorial

Ich hab mal den Versuch gemacht, ein Tutorial zu schreiben. Hier ist das Ergebnis

Oder im Folgenden untergliedert in 5 Punkte:

  • Google Maps Grundlagen
    Eine Karte von Google Maps generieren lassen und auf der eigenen Website einzubinden ist kinderleicht. Eine Google Maps nach eigenen Ansprüchen mit Hilfe der Google-Maps-API zu erstellen, ist jedoch weitaus eleganter und ermöglicht erst die Verwendung zusätzlicher Features.
  • Google Maps mit Sidebar
    Auf kleinen Firmen-Websites macht es sich immer gut, seinen Firmen-Standort
    mit Hilfe einer Landkarte abzubilden. Um Ihren Website-Besuchern eine schnelle,
    unkomplizierte Methode anzubieten, verschiedene Anfahrtsstrecken zu generieren,
    lesen Sie diesen Artikel.
  • Google Maps mit Straßenverbindungen
    Wenn viele Marker auf einer Google Map abgebildet werden, findet sich der User
    manchmal nur schwer zurecht. Eine Übersicht muss her. Wir zeigen ein Beispiel,
    wie man die Marker in einer Sidebar einbinden kann.
  • Google Maps mit eigenem Infofenster
    Beim Klick auf einen Marker einer jeden Google Map
    erscheint immer ein von Google generiertes Infofenster
    mit dem von Ihnen eingefügten Inhalt.
    Bauen Sie doch einfach Ihr eigenes Infofenster!
  • Quellensammlung zu Google Maps
    Nachdem an dieser Stelle schon einige grundlegende Techniken in Bezug auf Google Maps vorgestellt wurden, folgt hier eine dicke Portion Links und Quellen für alle, die sich eingehender mit der Materie beschäftigen möchten.

23 thoughts on “Google Maps Tutorial

  1. Danke für die interessanten Tipps. Endlich wird Google Maps mal wirklich einfach und verständlich erklärt. Sehr gut aufgebaut, so dass sogar ich was damit anfangen kann.

  2. Hallo

    Erstmal danke für das Tut. Klappt soweit alles.
    Nur der IE6 macht Probleme. Dort lädt der Browser ewig. Auch die Demos hier werden nicht geladen.
    Error: Line 17, Char 2, Error: Objekt erwartet, Code 0
    Auf meiner Seite das gleiche Problem:

    Gibts da eine Lösung?

    Gruß Manfred

  3. Welche Demos hier werden nicht geladen? Kannst du mal bitte die Demos sagen, die nicht funktionieren, dass ich mal nachsehen kann?
    Ich habe sie im IE-Tester mit dem IE6 getestet, bei mit klappts.

  4. Hallo Thomas

    Hmm, seltsam. Grade noch mal getestet.


    Beide getestet –> gehen nicht im IE6 (bei mir).
    Dann die Idee –> temp files gelöscht. Nun gehen deine Seiten :-). Neuer Versuch –> wieder nicht??

    Meine Seite im Geschäft mit dem IE6 getestet. Kommt auch nichts.

    Geht man auf den unteren Link (..bigger map), dann wieder zurück, dann wird der graue Hintergrund, die Controls und der Marker geladen. Mehr nicht. Nach erneutem Strg+R lädt er ewig…ohne Erfolg.

    Kannst du meine Seite mit dem IE Tester richtig darstellen? Ich nutze eine “portable” Version des IE6 von Xenocode.

    Gruß Manfred

  5. Nun werd ich wuschig… was ist das denn für ein Kommentar System hier.
    Ich meinte die ersten beiden Tut-Links.

  6. Hallo Thomas
    Keine Sorge ;-) Hatte nur jedes mal vergessen, die Tags zu schliessen.

    Hattest du eine Idee zu dem IE6 Problem?
    Habe gerade nochmal den ersten Tut-Beispiellink getestet im IE6. Geht leider wieder nicht. Seltsames Verhalten vom IE6.

    Gruß Manfred

  7. Schick mal bitte die Links, die bei dir nicht klappen, dass ich diese mal testen kann.
    Ich hab die Demos im IETester mit dem IE6 getestet, bei mir funktioniert alles.
    ?

  8. Hallo Thomas

    Dein erster Tut-Link geht bei mir nicht.
    Der Link zu “meiner Seite” klemmt natürlich auch.
    Habe das auch auf Arbeit mit dem dortigen IE6 getestet. Irgendwie scheint immer etwas anderes, aber nie das vollständige Ergebnis rauszukommen?

    Habe test halber mal eine iframe Variante auf meinen Server geladen. In dieser geht im IE6 fast alles. Dort fehlen “nur” Marker und Buttons.
    Sch… IE6. Danke für deine Unterstützung.

    Gruß Manfred

  9. in deiner html-Datei lädtst du (so bei Zeile 22) eine Datei ‘DD_belatedPNG.js’ für den IE6.
    Ich hab das mal rausgenommen, da funktioniert deine Seite in meinem IE6.

  10. Hallo Thomas

    Tatsache, habs gerade getestet. Hmm, aber ist die Karte bei dir vollständig, also mit Marker und den Controls? Die sehe ich nicht.

    Das andere Script (DD_belatedPNG.js) sorgt eigentlich für die Transparenz der PNGs. Muss mal gucken wie ich das anders löse.

    Noch mal danke für deine Hilfe
    Manfred

  11. Hallo Thomas

    ich kämpfe mich durch bei der Erstellung einer google map api …Alles schön und gut, aber da bin ich bei 2 “theoretische” Probleme gestolpert…Vielleicht kannst mir helfen.

    1. wie kann ich die Buchstaben im Sideboard mit Numern austauschen (geht zwar aber dann verschwinden die Icons ?!)
    2. wie könnte ich in der function machTwMarker meine flash 360° Panoramen einbauen? Irgendwie klappt es gar nicht mit dem flash…

    Grüß,
    Emil

  12. Hallo
    Klasse Tut, Danke!!
    Ergänzend nur eine Frage, die ich mangels Javaverständnis auch mit Google etc. nicht lösen konnte.
    Wie mache ich es programmiertechnisch, dass beim Klick auf einen Sidebar-Eintrag die Karte auf die Markerposition automatisch zentriert und dann das Infofenster öffnet?

    Danke und alles Gute für´s neue Jahr
    Jakob

  13. @emil:
    1. Die Buchstaben in der Sidebar sowie auf den Markern werden so erstellt:
    String.fromCharCode(sidebarZeichen.charCodeAt(0) + 1);
    Einmal in Zeile 13 als ‘sidebarZeichen’
    und einmal in der Funktion ‘machTwIconBuchstabeFortlaufend()’ (ca. zeile 160)
    2. Mit Flash kenn ich mich nicht aus.

    @Jakob:
    Um bei einem Klick auf den Marker das Infofenster zu öffnen musst du einen Event-Handler vergeben, beispielsweise so:
    GEvent.addListener(marker, ‘click’, function() {
    marker.openInfoWindowHtml(html);
    });
    Für die Sidebar geht das in etwa so:
    GEvent.trigger(marker, “click”);

  14. Hallo,
    vielen Dank für das super Tutorial! Es hat mir sehr dabei geholfen, eine Wegbeschreibung auf unserer Homepage einzubauen.
    Ich habe allerdings eine Frage: Bei der Übergabe der Adresse gibt es ein Problem mit Umlauten. Wenn ich bspw. als Startadresse “Düsseldorf, Königsallee” angebe, ist der Suchstring folgender:

    http://maps.google.de/maps?saddr=d%FCsseldorf%2C+k%F6nigsallee&daddr=51.467573%2C6.845411+%28Beautywash%2C+Hermann-Albertz-Str.+10-16%29

    Der Start- und Zielort werden zwar gefunden, allerdings wird die Routenplanung nicht gestartet. Erst wenn ich die beiden Umlaute im Suchstring durch “ue” bzw. “oe” ersetze, wird die Routenplanung korrekt angezeigt:

    http://maps.google.de/maps?saddr=duesseldorf%2C+koenigsallee&daddr=51.467573%2C6.845411+%28Beautywash%2C+Hermann-Albertz-Str.+10-16%29

    Ich habe schon viel recherchiert und bin darauf gestoßen, dass es wahrscheinlich an der Zeichenkodierung liegt und dass ich dem Suchstring “ie=iso-8859-1″ mit übergeben muss. Aber wie mache ich das? Ich habe es nicht geschafft, das in das Java-Script twGmap.js einzubauen. Ich würde mich über Hilfe sehr freuen!

    Gruß
    Karsten

  15. Hallo nochmal,

    ich konnte das Problem in der Zwischenzeit lösen.
    Die HTML-Seite, in der die Google Map eingebunden war, war mit charset=ISO-8859-1 formatiert.
    Wenn ich das Format stattdessen auf charset=utf-8 umstelle, ist das Problem behoben und die Route wird korrekt berechnet, auch wenn Umlaute in der Adresse vorhanden sind.

    Viele Grüße
    Karsten

  16. Pingback: Frage - Landkarte-Webseite - Freesoft-Board

  17. Hilfe!!!
    bräuchte mal Hilfe wegen Map API, Grund hatte ursprünglich die “normale ” Map eingebunden, der effekt beim vergrößern war “nur” das auch jedesmal meine google Startseite mitgeöffnet wurde.
    Hab mir den Key generiert und die Koordinaten
    regeneriert. Hab null Ahnung vom programmieren
    und Programmsprachen. Die Webseite hab ich mit
    Magix Webdesigner 6 erstellt, wo ich Platzhalter
    einfügen kann.
    Habs mir die Demo runtergeladen, die obigen Daten geändert nur funktionieren tut nichts.
    Wo muss ich denn welche Dateien hinladen?
    Kann mir Jemand was komplettes schicken wo ich mit dem texteditor meinen Key, Koordinaten eingeben kann?? Oder mir anderweitig Tipps geben
    kann?? !!!kann leider auch kein englisch!!!
    Vielleicht bin ich auch schon zu alt um das zu verstehen.
    Beste Grüße Peter

  18. Nachtrag, konnte nichts mehr korigieren.
    Maps API mit markern, ev.info plus Sidbar.
    Wollte Tanzgruppen aus der Umgebung, ehem. Heimat ev. Deutschland & worldwide etc. mit Stand- ort “aufisten” zB. für Urlaubsplanung (Wo kann ich im Urlaub tanzen gehen?)
    peter

  19. @Peter Du könntest eventuell direkt bei Google Maps unter Meine Karten dir deine Karten leicht selbst zusammenstellen.
    Wenn du wie du schreibst, nicht so fit mit Programmieren bist, dann kommst damit möglicherweise besser zurecht.

  20. Hallo Thomas, vorweg ich habe deine Seiten gefunden und es hat alles geklappt wie versprochen.

    Danke!

    Mein versuch war es soetwas wie hier: http://www.hinnerk-weiler.de/ (unten) zu erstellen aber ich scheitere schon daran ein Array mit verschieden Wegpunkten zu erstellen! Ich habe auch versucht das zu googlen oder anderswo zu finden; Fehlanzeige!

    Wie macht man sowas? das mit den Strassenverbindungen wäre ein Ansatz doch leider fahre ich durch das Wasser.

    Wenn du helfen kannst oder weisst wo ich daüber etwas finde wäre das super.

    Ciao und Danke Klaus

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>