Google Maps in WordPress einbinden ohne API Key
Nachdem ich lange gesucht habe um herauszufinden wie man eine Google Maps Karte in das CMS WordPress einbindet möchte ich euch die Lösung natürlich nicht vorenthalten.
Das Problem besteht darin, dass der WYSIWYG-Editor von WordPress (TinyMCE) die iframe Tags schlichtweg im Quellcode eliminiert.
Hierzu kursieren im Netz verschiedene Lösungsansätze. Es gibt z.B. einige PlugIns zur Darstellung von Google Karten. Jedoch sind diese für einfach Zwecke etwas “oversized” und erfordern auch einen API-Key von Google. Auch Lösungen wie das Plugin “embed iframe” funktionieren nicht zuverlässig. Es gab auch die Möglichkeit ein paar Zeilen Code in die functions.php des Templates zu schreiben um das iframe im TinyMCE zulassen zu können.Leider funktionierte Letzteres in WP 3.0 nicht mehr.
Nun habe ich ein PlugIn gefunden, welches das Elimieren des <iframe> Tags beim Umschalten zwischen dem HTML-Eingabemodus und dem visuellen Eingabemodus verhindert.
Für unsere Zwecke muss also das PlugIn TinyMCE Valid Elements installiert werden. Unter “Werkzeuge” -> “TinyMCE Valid Elements” fügt man nun das <iframe> Tag mit den entsprechenden Attributen hinzu.
Diese eingefügten Tags werden nun vom WYSIWIG Editor nicht mehr angefasst. Nun kann man den Embed-Code von Google Maps nutzen um Karten darzustellen.
Wie man nun eine Karte in seinen Blogartikel einfügt erkläre ich in diesem kurzen Video.
hallo,
erst einmal vielen Dank für Deine Erklärungen, leider habe ich nicht verstanden wie das mit dem Einfügen gemeint ist, soll ich das ganze iframe Textobjekt das ich schon in die Webseite eingefügt habe noch einmal in das Feld einfügen, oder was soll ich dort sonst eingeben?
Du schreibst: Tag mit den entsprechenden Attributen hinzu, was meinst Du bitte mit den Attributen?
Also offenbar nur und was noch dazu?
Danke für Deine weitere Unterstützung!
Hallo derx,
grundsätzlich besteht die Einbindung aus zwei Schritten. Zuerst muss, wie im Artikel beschrieben, der TinyMCE (das ist der Editor in welchem Du den Text Deines Artikels eingibst) so angepasst werden, dass der Editor den iframe – Tag nicht entfernt.
Hierzu musst Du unter “Werkzeuge” -> “TinyMCE Valid Elements” das iframe Tag plus die Attribute als Ausnahmenregel einstellen, so wie es im obigen Screenshot angezeigt wird.
Erst DANACH kannst Du den iframe Code Deiner Map im Reiter “HTML” (oben rechts neben “Visuell”) hinzufügen. Nach dem Speichern sollte die Karte dann angezeigt werden.