Womo-Abenteuer

Nordamerika im Wohnmobil erleben!

Wie fügt man eine Karte aus Google Maps ein?

Kategorie: 
Zu dieser Webseite

Das Einbinden von Karten aus google maps verursacht bei den meisten Newbies die größten Probleme. Der Hauptfehler, der dabei meistens gemacht wird, besteht darin, dass einfach die Internetadresse (URL) aus google kopiert und in den Textkörper eingefügt wird. Dadurch wird aber keine Karte eingefügt, sondern nur eine ellenlange Buchstabenkette.

Direkte Karten-Screenshots dürfen aus Gründen des Google-Copyrights nicht gepostet werden. Wegen drohender finanzieller Nachteile für die Betreiber dieser Website müssen wir sie löschen.


Wie geht es richtig?

Um eine Karte mit dem Routenverlauf in einen Beitrag einzubinden, müsst ihr folgenden Workflow einhalten:

1. Route erstellen:

  • Erzeugt in Google Maps (wichtig: im nicht - angemeldeten Modus -- nur so können wir sie bearbeiten) eine Route, die aus maximal 10 Zielen bestehen kann.
  • Geht hierzu in der Karte mit der Maus oben links in das weiße Feld, klickt auf "Routenplaner" und gebt eure Punkte ein.

Hinweis: mehr als 10 Punkte kann das neue Google Maps nicht verarbeiten, das reicht für eine Tour meist nicht aus. Folglich werdet ihr nacheinander mehrere Maps erstellen müssen.

2. Inline-frame erzeugen:

  • Klickt in der Google Map links oben auf das Menü (die drei waagerechten Balken).

  • Klickt auf "Karte teilen oder einbetten" --> Es erscheint ein neues Fenster.
  • Klickt dort auf "Karte einbetten" --> Es erscheint ein langer Link, der mit <iframe .....> beginnt.
  • Markiert diesen Link und nehmt ihn mit Strg + c (Windows) bzw. cmd + c (Mac) in den Arbeitsspeicher.
  • (Optional könnt ihr die Kartengröße in Pixeln hier auch manuell ändern.)

Hinweis: Ein iframe oder inline-frame dient dazu, Inhalte von Websites in anderen Websites einzubinden.

3. Inline-frame einfügen:

In der Regel habt ihr euren Beitrag zuerst mit einem Texteintrag begonnen und wollt nun die Karte einbetten.

  • Geht wieder zurück zu eurem Beitrag auf unserer Website
  • Klickt oben bei den Editor-Symbolen ganz links auf "Quellcode" --> Die Darstellung ändert sich und euer Text erscheint zusammen mit den HTML-Steuerbefehlen. Nicht verwirren lassen, die HTML-Codes werden wir gleich wieder los.
  • Fügt euren bei Google Maps kopierten Code (aus Punkt 2)  mit Strg + v (Windows) bzw. cmd + v (Mac) ins Textfeld ein.
  • Klickt nach dem Einfügen des Codes erneut auf "Quellcode", um wieder bequem weiter schreiben zu können, statt im HTML-Gestrüpp.

Hinweis: Nicht verwirren lassen, falls man die Karte noch nicht sieht, sondern nur ein leeres Feld mit iframe in der Mitte. Die Karte ist aber da und wird beim Abspeichern dann sichtbar.

4. Speichern:

  • Speichert euren Kommentar wie gewohnt ab.
  • Sollte die Karte noch nicht sichtbar sein, ladet die Seite einfach nochmal neu.

01/22 - elli