Mit einem iframe Google Maps in eure Homepage einzubinden ist relativ einfach. Dabei sind nur ein paar Kleinigkeiten zu beachten:
Bitte verwendet diese Technik zur Einbindung von Google Maps nur für eure privaten Seiten und nicht für gewerbliche Websites!
Zuerst braucht ihr ein Google Konto, welches ihr in der Google-Maske oben rechts unter dem Menüpunkt Anmelden und dann unter Legen Sie jetzt ein Konto an erledigen könnt.
Unter Mein Konto könnt ihr bei dem Punkt Maps Eigene Karten anlegen. Wollt ihr für euer Unternehmen so ein blaues Fähnchen mit dem Standort eurer Firma in Google Maps meldet Ihr euch beim Lokalen Branchencenter an. Das kann ein paar Tage dauern, wenn ihr den Weg über die Postkarte mit dem Verifizierungscode wählt.
Habt ihr das erledigt besucht euren Google Account und geht dort bei Maps auf Meine Karten. Auf der linken Seiten könnt ihr im darauffolgenden Fenster normalerweise den Namen eurer Karte anklicken.
Die Karte mit eurem zentrierten Fähnchen sollte nun erscheinen.
Oben rechts den Menüpunkt Links anklicken und im sich öffnenden Fenster Eingebettete Karte anpassen und Vorschau anzeigen auswählen.
Es öffnet sich ein neues Fenster, wo ihr die Kartengröße anpaßt und weiter unten den entsprechenden Code herauskopiert und an geeigneter Stelle in eurer Dokument einfügt.
Der Code schaut ungefähr so aus:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?hl=de&ie=UTF8&msa=0&msid=101716536245083691146.000470b73c676706d98d9&ll=48.570745,13.474919&spn=0.002485,0.00456&z=17&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps/ms?hl=de&ie=UTF8&msa=0&msid=101716536245083691146.000470b73c676706d98d9&ll=48.570745,13.474919&spn=0.002485,0.00456&z=17&source=embed" style="color:#0000FF;text-align:left">KS Webdesign</a> auf einer größeren Karte anzeigen</small>
Sehr praktisch finde ich das man nur das Fähnchen anklicken muss, damit sich ein kleines Popup mit der Anschrift öffnet. Unter Route berechnen: Hierher gibt man nur die Startadresse ein und einer Routenberechnung steht nichts mehr im Wege.
Habt ihr einen Strict-Doctype ist die Seite nicht mehr valide, weil da keine iframes erlaubt sind. In diesem Fall ändert ihr den Doctype einfach auf Transitional.
An der zweiten Codezeile würde ich noch ein paar Modifikationen vornehmen:
small gegen p austauschen und die Inline-Styles entfernen, damit eure normalen Formatierungen wieder greifen.
Grundsätzlich kann ich iframes nicht ausstehen, aber manchmal ist ein gesunder Pragmatismus auch nicht verkehrt.
Update: seit kurzem (01.10.2011 ?) funktioniert das Einbetten von Google Maps per iFrame im Internet Explorer (IE7) NICHT mehr. Die Karte wird angezeigt, aber nicht der Standort und es gibt einen Javascript-Fehler.
Ich linke eigentlich nur auf Google-Maps mit den entsprechenden Koordinaten. Iframes kommen mir nicht ins Haus, das nagt an der Performance, hab ich den Eindruck. Und Transitional ist doch HTML für Warmduscher
Ich wollt gerade nachschauen, ob Du auf deiner Website eine Google-Map hast… Frühjahrsputz? Sieht gut aus!
danke.
Nein ich habe das auf einer Testseite ausprobiert.
Ich mag sie ja auch nicht, aber es war die pragmatischste Lösung.
Man kann sich auch einen Google-Maps-Api generieren lassen und das dann per Javascript/Ajax oder Flash machen
Hehe, der war gut!
Interessante Sache, für eine Firmenhomepage sicher ganz nett.
Für mich käme ein IFrame aber auch auf keinen Fall auf die Seite.
Und warum sollte ich eine unterschiedliche Anzeige der Website durch den Transitional-Doctype riskieren?
LG vitus
P.S. Netter Blog
Hi Vitus,
ja der “Warmduscher-Doctype” ist eigentlich auch nix für mich.
Strict ist Pflicht, sage ich immer.
Persönlich schaue ich dann in nächster Zeit mal nach ner JS-Lösung und die “iframe-Lösung” dann nur als Fallback für noscript.
Den unterschiedlichen Anzeigen des “Warmduscher-Doctype” begegne ich dann durch ausreichendes Testen.
Gruß
Klaus
Pingback: Idee zu Googlemaps --> ob, und wie realisieren? - XHTMLforum
Hallo Klaus,
ich bleibe lieber bei meinem DocType XHTML 1.0 strict und valider Einbindung von Google Maps mit API-Schlüssel und dem WordPress-Plugin wpMAPS von Sergej Müller (siehe hierzu auch meinen Blogbeitrag Karte mit WordPress-Plugin wpMAPS) .
Beste Grüße
Dieter
PS: Das Maskieren ist für mich ungewohnt. Ich hoffe, ich habe es für den Link richtig gemacht.
Moin Dieter,
danke für deinen Link, ist eine schöne Ergänzung meines Artikels.
Den Hinweis mit dem Maskieren muss ich wohl ergänzen. Links kann man nach wie vor ganz normal mit dem Link-Button eintragen, da muss man nichts maskieren.
Nur wenn man z.B. einzelne XHTML-Tags in den Kommentar setzt müssen die spitzen Klammern maskiert werden.
Viele Grüße
Klaus
Guten Abend Klaus,
die Buttons hatte ich nicht wahrgenommen. War wohl schon spät.
Freut mich, dass Du den Link gut findest.
Die wpMAPS-Lösung setzt WordPress voraus, ist aber dann eine echte Alternative zum iframe.
Ich habe auch manuell auf einer Webseite Google Maps mit API und ohne iframe oder Plugin realisiert (siehe ). Das war dann aber keine einfache Lösung mehr und leider habe ich sie nicht dokumentiert.
Nehmt einfach den HTML5-Doctype, und der iframe ist wieder standardkonform.
Iframes haben den Vorteil, dass die aufrufende Seite keine weiteren Mechanismen enthalten muss, um den Inhalt der Fremdseite (Google-Map) einzubinden. Die eigene und die fremde Seite sind physisch sauber voneinander getrennt, es kann also zu keinen Wechselwirkungen kommen, z. B., dass IDs, Klassennamen oder gar JavaScripte kollidieren. Insbesondere bei einer Google-Map, die ja eine Menge CSS und JS mit sich bringt, bezweifle ich, dass sie überhaupt noch funktioniert, wenn sie mit AJAX direkt in die eigene Seite eingebettet wird.
(Nebenbei: im Gegensatz zu einer AJAX-Version funktionieren Iframes auch bei abgeschaltetem JavaScript.)
Ich kann im Übrigen die verbreitete Ablehnung von Iframes nicht nachvollziehen. Bei der Verwendung von “object” oder “video” erzeugt man im Prinzip auch nichts anderes als ein “viereckiges Loch”, in das ein externer “Fremdkörper” eingeblendet wird. Wenn man nicht mit zweierei Maß messen will, muss man dies auch einem Iframe zugestehen.
André
Update: seit kurzem (01.10.2011 ?) funktioniert das Einbetten von Google Maps per iFrame im Internet Explorer NICHT mehr. Zumindest nicht mit dem MSIE 7.0 (der ja lt. Google-Maps angeblich noch unterstützt wird)
Die Karte wird angezeigt, aber nicht der Standort und es gibt einen Javascript-Fehler.
Ich denke das Geschrei dazu wird in den kommenden Tagen+Wochen groß sein, denn viele Webdesigner haben ja ihre Karte/Standort so eingebettet (exakt nach Googles Anleitung).
Im FF und in Google Chrome funktioniert auch die iFrame-Karte nach wie vor bestens (O Wunder..)
Moin Gregor,
danke für die Info!
Hab ich oben gleich mal ergänzt.
Tja, also das Geschrei WAR tatsächlich groß und wir haben für alle Kunden mit etwas Aufwand die empfohlene Maps-API von Google integriert (V3, ohne iFrames) -dann lief es überall wieder im MSIE.
Mittlerweile hat sogar Google das Thema eingesehen und die iFrames-lösung läuft (soweit ich weiss) auch wieder im MSIE..
Iframes mögen an der Performance kratzen, aber Javascripts werden je nach Browser Einstellung eben erst gar nicht angezei´gt…Auch nicht gerade praktisch
mit HTML5 sind scheinbar alle Dämme gegen JS gebrochen.
Das JS nicht überall zur Verfügung steht…macht nix mehr,
Das JS schließlich beim Client ausgeführt……macht auch nix mehr, hauptsache HTML5 und modernes Webdesign.
Das kann man gut oder schlecht finden, manche Moden wischen scheinbar alle Bedenken beiseite.