Google Maps Tutorial
20. Dezember 2008 von Thomas | 23 Kommentare
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.
1. Karsten
Kommentar vom 29. Dezember 2008 um 08:42
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. Manfred
Kommentar vom 6. Dezember 2009 um 21:50
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 0Auf meiner Seite das gleiche Problem:
Gibts da eine Lösung?
Gruß Manfred
3. Thomas
Kommentar vom 7. Dezember 2009 um 06:22
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. Manfred
Kommentar vom 7. Dezember 2009 um 18:33
Hallo Thomas
Hmm, seltsam. Grade noch mal getestet.
. Neuer Versuch –> wieder nicht??
Beide getestet –> gehen nicht im IE6 (bei mir).
Dann die Idee –> temp files gelöscht. Nun gehen deine Seiten
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. Manfred
Kommentar vom 7. Dezember 2009 um 18:35
Sorry
Die Links sind rausgeflogen:
Manfred
6. Manfred
Kommentar vom 7. Dezember 2009 um 18:37
Nun werd ich wuschig… was ist das denn für ein Kommentar System hier.
Ich meinte die ersten beiden Tut-Links.
7. Thomas
Kommentar vom 17. Dezember 2009 um 11:30
Hallooo…
Ruhig bleiben…
nicht vergessen, das ist ein freiwilliges, kostenloses Tutorial…
8. Manfred
Kommentar vom 19. Dezember 2009 um 16:15
Hallo Thomas
Hatte nur jedes mal vergessen, die Tags zu schliessen.
Keine Sorge
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
9. Thomas
Kommentar vom 19. Dezember 2009 um 16:37
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.
?
10. Manfred
Kommentar vom 19. Dezember 2009 um 17:56
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
11. Thomas
Kommentar vom 19. Dezember 2009 um 18:23
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.
12. Manfred
Kommentar vom 19. Dezember 2009 um 22:39
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
13. emil
Kommentar vom 26. Dezember 2009 um 23:28
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
14. Jakob
Kommentar vom 30. Dezember 2009 um 12:01
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
15. Thomas
Kommentar vom 14. Januar 2010 um 16:56
@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”);
16. Karsten L.
Kommentar vom 10. Juni 2010 um 23:37
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
17. Karsten L.
Kommentar vom 15. Juni 2010 um 21:53
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
18. Frage - Landkarte-Webseite - Freesoft-Board
Pingback vom 29. Juni 2010 um 09:43
[...] [...]
19. Peter
Kommentar vom 27. Oktober 2010 um 19:10
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
20. Peter
Kommentar vom 27. Oktober 2010 um 19:17
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
21. Thomas
Kommentar vom 28. Oktober 2010 um 05:54
@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.
22. Klaus
Kommentar vom 14. Februar 2011 um 16:10
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
23. Thomas
Kommentar vom 14. Februar 2011 um 16:36
Hast du mal hier probiert?