Google Maps in Joomla Content einbauen

Geschrieben von: Klaus Frei

Google Maps oder jeden beliebigen Content an jede beliebige Position in einem Artikel stellen

Ab und zu möchte man einen flexibel und vor allem zentral gesteuerten Code oder Text, ein Menu oder Bild oder eine Landkarte von Google Maps in den Inhalt eines oder mehrerer Artikel einbauen. Dies lässt sich mittels Modul realisieren, dass sich an einer x-beliebigen Position mit einem einfachen Tag einfügen lässt. Das Anwendungsgebiet ist sehr vielfältig. Z.b. Google Landkarten, Werbung, Banners, Bilder, Menüs etc.

Ein Vorteil dieser Variante ist, jedem Modul eine eigene Modulposition geben zu können, ohne am CSS-File eine Änderung machen zu müssen.

Um im HTML-Modul einen Code einzubauen, muss man entweder den Editor auschalten (User Manager > Super Admin > User Editor > No Editor) oder besser, einen Editor installieren, bei dem man von der Ansicht auf Code-Ansicht umstellen kann, wie zum Beispiel JCE Achtung! leider scheint der neue JCE (bis Okt 2009)* den Google Maps iframe zu verändern. Falls Probleme entstehen, ein Update für das JCE machen oder hier... das Plugin jce_iframe_154 herunter laden und im JCE-Admin installieren. Auch das sehr nützliche Code-Tool RokPad ist eine gute Variante! Eine andere Möglichkeit: macht zwei Super Admins, einen mit und einen ohne Editor. So kann man zwei Fenster offen halten und bei Bedarf wechseln.
Probleme mit dem Read more... Button oder Weiterlesen... Button. Falls ihr den JCE verwendet und die Read more... oder weiterlesen... Funktion im Editor nicht mehr funktioniert, findet Ihr hier... eine Lösung.

*Ganz übel ist die neuste Version 157/154 da gibt es nicht einmal mehr die "Pagebreak" und "Read more..." Bottons - keine Ahnung, was Ryan Demmer da geritten hat...

Wie das geht liest man Nachfolgenden Schritten:

1. Joomla > Extensions > Module Manager >
- Oben rechts auf "New" oder "Neu" klicken
- Modul "Custom HTML" öffnen
- Unter "Details" bei "Position" einen neuen Namen eingeben (ja er lässt sich ändern). Zum Beispiel "map_zurich"
- Unten, alle Seiten auswählen
- Modul aktivieren
- 2. Google Code beschaffen http://maps.google.de/
  Man braucht dazu keinen Account. Einfach im Suchfeld auf Google.maps den gewünschten Ort eingeben. Danach oben rechts auf "Link" klicken. Im kleinen Fenster, das sich öffnet, wird in der unteren Zeile ein iFrame angezeigt. Diesen kopieren
  Eleganter ist es noch, wenn man auf "Eingebettete Karte anpassen und Vorschau zeigen" klickt.
- Hier kann man die Karte in der Grösse und im Zoombereich seinen Wünschen anpassen. Zusätzlich kann man Zeichen setzen, Textkästchen einfügen und vieles mehr.
- Den Code kopieren und in das Textfeld des Moduls einsetzen (Achtung! dabei entweder ohne Editor, mit RokPad oder mit einer älteren Version des Editors JCE arbeiten!)
Das Ganze sollte dann in der Code-Ansicht etwa wie folgt aussehen:
```
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"src=
"http://maps.google.de/maps?f=q&amp;source=s_q&amp;hl=
de&amp;geocode
=&amp;q=Z%C3%BCrich&amp;sll=51.151786,10.415039&amp;sspn=25.315152,39.331055
&amp;ie=UTF8&amp;s=AARTsJpNkLQnPX2zih8cK8ftHG3KEKYGTw&amp;ll=47.375686,8.542213&amp;spn
=0.020343,0.036478&amp;z=14&amp;output=embed"></iframe><br /><small><a href=
"http://maps.google.de/maps?f=q&amp;source=embed&amp;hl=de&amp;geocode=&amp;q=
Z%C3%BCrich&amp;sll=51.151786,10.415039&amp;sspn=25.315152,39.331055&amp;ie=UTF8&amp;ll=
47.375686,8.542213&amp;spn=0.020343,0.036478&amp;z=14" style="color:#0000FF;text-align:left">
Größere Kartenansicht</a></small>
```
2. Den Code noch den eigenen Bedürfnissen anpassen. Verändern kann man gut "width=....", "height=..., frameborder, aber auch den Zoombereich. Dazu auf Zeile 6 bei ";z=14 die Zahl ändern.
3. Joomla > Extension > Plugin Manager öffnen
- Das Plugin "Content - Load Module" öffnen (eventuell ist es die deutsche Bezeichnung!
- Auf der rechten Seite unter > Parameters > Style auf "Now Wrapping Raw Output" stellen (nicht umgeben - reiner Inhalt ).
- Sichern - darauf achten, dass das Plugin aktiviert ist.

4. Nun kommt das einfachste. Wenn wir nun den Tag { loadposition map_zurich }* - ohne die Leerzeichen zwischen Klammer und Text - irgendwo in einem Artikel (Beitrag) eingeben, erscheint folgende Karte im Text:

Größere Kartenansicht

Natürlich kann so pro Modul immer nur ein und dieselbe Karte erzeugt werden. Es lassen sich aber soviele Module wie man will kopieren. Man muss nur jedem Modul einen eigenen Namen geben. Und natürlich den Code von Google Maps anpassen. Das Plugin "Content - Load Module" muss man natürlich nicht kopieren.

* Der Begriff "loadposition" lädt ein Modul an die gewünschte Position.

Google Maps in Joomla 1.5

Google Maps in Joomla Content

Eintrag in Google Maps erstellen

Der zweite Begriff, hier "map_zurich} ist der Name, den man dem neuen Modul gegeben hat. Theoretisch kann man damit natürlich fast alle Module an jede Position setzen. Wie zum Beispiel das kleine Menu hier rechts.

Einbinden von Goolge Maps Karten mittels Macro Manager

Wie ganz am Anfang bereits angeführt erweitern sich die Möglichkeiten Google Maps in Joomla einzufügen stetig. Eine ganz spezielle Art ist dies mittels zentral verwaltetem Macro zu tun. Würden Sie glauben, dass diese Landkarte, die unten angefügt ist, mit genau zwei Klicks erstellt wurde? Man hat mit dem neuen Tool die Möglichkeit alle Karten von einem zentralen Punkt aus ein- und auszuschalten oder die Grösse zu verändern. (Der Code dazu heisst dann zum Beispiel schlicht: [ googlemaps]{Landkarte}[googlemaps ] . Die Karten lassen sich anschliessen per Wisywig einbinden - zwei Klicks! Und so sieht das dann aus:

Größere Kartenansicht

Natürlich braucht es zuerst ein bisschen Arbeit, bis es so einfach geht. Ein Macro-Manager (immer muss wer managen! ;-) muss installiert werden. Sehr gut ist zum Beispiel der Macro Manager "RokCandy" von Rocket Themes.

Dieser wird so programmiert, dass man ihn über den Editor Abrufen kann. Ähnlich, wie man bei einem Artikel ein Bild einsetzt, kann man nun seine Google Maps integrieren, zudem kann man die Landkarten in Kategorien verwalten, was die Sache sehr übersichtlich macht. Hat man dieselbe Karte auf verschiedenen Seiten, lassen sie sich zudem zentral ändern, löschen oder aufschalten.

Hat die Anleitung etwas gebracht? Hast Du Verbesserunsvorschläge? Lob, Anregungen und Insidertipps kannst Du ohne Registration unten anfügen!

© Klaus Frei, Zurich

Übrigens ist auch der Spendenbutton unten auf diese Weise eingefügt. Falls Dir also die Anleitung einen (oder ganz viele) Kaffes wert sein sollte, freut sich meine Psyche darüber ;-).

Kommentar schreiben / Write your comment

Ihr Name: Your name:
Ihre E-Mail: Your email:
Ihre Webseite: Your website:
Betreff: Subject:
Kommentar: Your Comment:

Sicherheitscode:

Kommentare (9)

1. Du hast das Modul im Titel mit map1 benannt. Die Bezeichnung musst Du aber bei "Position" eingeben. Dies ist das Spezielle am HTML-Modul. Man kann ihm eine eigenen Positions-Namen geben und dies wird dann zu einer imaginären Position. Normalerweise solltest Du dann unter Menuauswahl auf "alle" stellen, damit Dir der Code auch überall zugänglich ist. So wie es jetzt ist, funktionierts dann nur auf der "Friedhof" Seite.

2. Den Google Code musst Du - wie bei Googlemaps zur Verfügung gestellt - als IFrame eingeben, sonst geht das nicht. Das imaginäre Modul muss ja in einem Rahmen stehen.

Ich habe versuchsweise mal meine Karte reingestellt, damit Du siehst, dass es geht. Darunter siehst Du in der Code-Ansicht, Deinen Code, der jetzt nicht mehr auf der Seite erscheint, weil er nicht im iFrame steht.

danke für die Info,
ich habe es heute nochmal probiert mit folgenden Einstellungen. Die Google Karte landet bei mir immer auf der linken Seite überhalb oder unterhalb des Hauptmenüs. Jedenfalls nicht im Artikel drin.

In den Moduleinstellungen ist folgendes Hinterlegt. (hier habe ich auch schon ein wenig rumgespielt und auch den Code in eine Tabelle eingefügt)

titel anzeigen: nein
Aktiviert: ja
Position: left
Reihenfolge: 0 Custom Code
Zugriff: öffentlich
Menüs: Alle

Vielleicht kannst du mir, falls es nicht so kompliziert ist, mir den Code aufzeigen, wie ich die Karte an das Ende des Textes bekomme bzw. in den Artikel rein!
Schonmal vielen Dank für deine Hilfe

Hallo Olaf

hast Du das Modul auf "Reiner Inhalt... " umgestellt (Englisch: No wrapping...). Siehe Punkt 3?

Das ist richtig. Wenn Du mit dem HTML arbeitest, musst Du, wie unten beschrieben, entweder den Wysiwyg-Editor auschalten oder den JCE-Editor einsetzen, wo man auf Code umschalten kann (sehr zu empfehlen!). In der Code-Ansicht gibtst Du dann einfach den Code ein und sicherst die Seite. Ich werde das in der Beschreibung mal einfügen. Danke für den Hinweis! Gruss, Klaus

noch eine Frage:
1. Joomla > Extensions > Module Manager >

* Oben rechts auf "New" oder "Neu" klicken
* Modul "Custom HTML" öffnen -> ich habe hier Custom Code oder Eigenes HTML

Bei Custom Code wird mir auch diese Google Karte angezeigt und bei Eigenes Html nur der Quelltext

Hallo, ich habe gerade die Anleitung befolgt. Nur die Karte ist nicht an der Stelle, wo ich den Befehl eingefügt habe, sondern mal links, mal rechts, oben oder unten. (dies kann ich mit der Position im Modul verändern). Nur wie bekomme ich die Karte zu der Stelle, wo der Befehl steht?

Hallo Olaf,

die Frage ist gut, ganz so einfach geht das natürlich auch wieder nicht. Normalerweise steht die Karte, wie jeder unformatierte Text, einfach linksbündig auf einer neuen Zeile. Willst Du sie an einem speziellen Ort, musst Du sie entweder in eine Tabelle (und dieser die Position zuweisen) oder mittels HTML-Code die Position zuweisen. Gruss

Hallo Stefan

Hast Du den Punkt 3 auch beachtet?

"3. Joomla > Extension > Plugin Manager öffnen
Das Plugin "Content - Load Module" öffnen (eventuell ist es die deutsche Bezeichnung!
Auf der rechten Seite unter > Parameters > Style auf "Now Wrapping Raw Output" stellen (nicht umgeben - reiner Inhalt ).
"

Anonsten kann in einem Artikel keine Modulposition angezeigt werden, also ergo auch nicht das "gefälschte" Modul.

Falls dies nicht das Problem sein sollte, brauche ich etwas genauere Angaben.

Gruss, Klaus

Hallo Zusammen!

Habe alles ganz genau nach Anleitung gemacht. Wenn ich als Position in meinem Modul einen eigenen Namen eingebe (map) und dann in einen Beitrag eingebe, wird in dem Beitrag leider nichts angezeigt. Nehme ich eine tatsächlich existierende Position, wie z. B. "right" zeigt er die Karte vom Feinsten an.

Was ist da wohl schiefgelaufen????

Gruß Stefan

Genau das habe ich gesucht, dafür schon mal danke.

Aber was ich nicht ganz verstehe. Bei Schritt 4 steht, man soll { loadposition map_zurich } eingeben. Aber wo? Das ist mir nicht so ganz klar.
Und, wie könnte "Now Wrapping Raw Output" auf deutsch heißen? Es gibt zur Auswahl:
1. Mit Tabelle umgeben - Spalten
2. Mit Tabelle umgeben - Horizontal
3. Mit Divs umgeben
4. Mehrfach mit DIVs umgeben
5. nicht umgeben - reiner Inhalt

Vielen Dank schonmal und Grüße, Olli.

Hey Klaus,

vielen Dank. Hat super geklappt. Hatte erst auch das Problem von Jana, aber hab dank deiner Hilfe auch das hinbekommen.
Sehr guter Service hier.

Schönen Tag, Olli.

Hallo Olli

Das wäre dann Punkt 5 (nicht umgeben - reiner Inhalt) - habe das auf Deutsch noch gar nie gesehen!

Die Funktion { loadposition map_zurich }* gibst Du einfach irgendwo in Deinem Text ein, einfach dort, wo Du die Karte gerne haben möchtest. Die Grösse stellst Du dann im Code ein. Hoffe das hilft. Du kannst zusätzlich noch "target=blank" in den Code einfügen, damit die Vollansicht in einer neuen Seite öffnet.
*der zweite Teil ändert natürlich bei jedem neuen Modul - das Muster ist mein Modul. Dies nur, falls das jemandem nicht klar sein sollte.

Gruss, Klaus

Zitat: "Den Code kopieren und in das Textfeld des Moduls einsetzen
(Achtung dabei darf entweder kein Editor verwendet werden oder JCE im Code-Modus!)"

Wie genau ist das gemeint und wie stelle ich das an?
Wenn ich den Code aus Google Maps in die Code Ansicht des Moduls kopiere
dann bleibt leider nur das "Größere Kartenansicht" stehen. Der Rest fällt weg...
Das andere Modul funktioniert aber ich will die Karte unbedingt direkt in den Artikel einbauen!

Schnelle Antwort wäre nett.

Mfg, Jana Menzel

Hat geklappt! Vielen herzlichen Dank!

Das ist ziemlich einfach. Ich gehe mal davon aus, dass Du das Plugin des JCE und die JCE Utilities (auch im Plugin) auch aktiviert hast. Danach im User Manager Dich selbst auswählen und oben rechts unter "Parameters" > "User Editor" den gewünschten Editor auswählen.

Den JCE Editor habe ich installiert aber ich weiß nicht wie ich ihn aktivieren kann... Ich glaube das ist mein ganzes Problem! :-)

Hallo Jana

Wenn Du den Code in die Seite eingibst, darfst Du das nicht mit dem WYSIWYG-Editor machen.
Entweder musst Du den Editor auschalten oder den Editor von JCE installieren.
Dort kannst Du von der WYSIWYG Ansicht auf Code-Ansicht umstellen, was sehr nützlich ist.
Gruss, Klaus

Joomla 1.5 Inside

Kaffee hält uns bei der harten Arbeit am Leben. Unterstützen Sie uns mit einer Tasse...

Google Maps oder jeden beliebigen Content an jede beliebige Position in einem Artikel stellen

Kommentar schreiben / Write your comment

Joomla 1.5 Inside

Joomla Beratung + Infos