Mit einem iframe Google Maps in eure Homepage einzubinden ist relativ einfach. Dabei sind nur ein paar Kleinigkeiten zu beachten:
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.
« Navi includen – ohne Deppenlink – Mit Wordpress umziehen »
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
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.
[...] [...]