Google Maps in Joomla Content einbauen

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

Joomla 1.5.x, 2.5, 3.xx

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 . Hier lohnt es sich auf jeden Fall die pro Version zu kaufen. Einmal bezahlen erlaubt den uneingeschränkten Einsatz.Auch das sehr nützliche Code-Tool RokPad (für Joomla 2.5 und 3.0 erhältich) 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.

Wie das geht liest man Nachfolgenden Schritten:

  • 1. Joomla > Extensions > Module Manager >
    • Oben rechts auf "New" oder "Neu" klicken
    • Modul "Custom HTML" oder "eigenen Inhalt" ö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 (ändert bei Google von Zeit zu Zeit):

    <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 ;-).

 
Kommentare (9)
Google Maps im Joomla Content positionieren
9Sonntag, den 24. Mai 2009 um 14:21 Uhr
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.
Google Maps
8Sonntag, den 24. Mai 2009 um 13:12 Uhr
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 {loadposition map_1} 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
Im Modul auf "Reiner Inhalt nicht umgeben" umstellen
Sonntag, den 24. Mai 2009 um 14:06 Uhr
Hallo Olaf

hast Du das Modul auf "Reiner Inhalt... " umgestellt (Englisch: No wrapping...). Siehe Punkt 3?
custom code - eigenes HTML
7Donnerstag, den 21. Mai 2009 um 09:11 Uhr
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
welches modul
6Mittwoch, den 20. Mai 2009 um 23:11 Uhr
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
Maps irgendwo
5Mittwoch, den 20. Mai 2009 um 23:00 Uhr
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?
Maps irgendwo
Donnerstag, den 21. Mai 2009 um 09:07 Uhr
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
loadposition funktioniert nicht
4Freitag, den 08. Mai 2009 um 12:41 Uhr
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
loadposition funzt bei mir nicht!
3Freitag, den 08. Mai 2009 um 12:28 Uhr
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 {loadposition Karte_xy} 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
Schritt 4
2Dienstag, den 24. März 2009 um 16:21 Uhr
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.
Schritt 4
Mittwoch, den 25. März 2009 um 12:32 Uhr
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.
loadposition map_zurich
Dienstag, den 24. März 2009 um 16:33 Uhr
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
Frage...
1Donnerstag, den 19. März 2009 um 17:39 Uhr
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
Frage...
Donnerstag, den 19. März 2009 um 18:25 Uhr
Hat geklappt! Vielen herzlichen Dank!
Aktivieren des JCE-Editors
Donnerstag, den 19. März 2009 um 18:13 Uhr

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.
Frage...
Donnerstag, den 19. März 2009 um 17:59 Uhr
Den JCE Editor habe ich installiert aber ich weiß nicht wie ich ihn aktivieren kann... Ich glaube das ist mein ganzes Problem! :-)
Google Maps code in Webseite einsetzen
Donnerstag, den 19. März 2009 um 17:50 Uhr
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

Kommentar schreiben / Write your comment

Ihr Name:
Your name:
Betreff:
Subject:
Kommentar:
Your Comment:
  Bild, welches den Sicherheitscode enthält
Sicherheitscode:

Phottix JJC GoPro Fotopro JYC
Funkauslöser, Stative, Kugelköpfe
Studioausrüstung, Trigger, Wireless
Batteriegriffe, Akkus, Ladegeräte
UV-Filter, Polfilter, Graufilter
Phottix Odin, Phottix Indra

Phottix Atlas Strato Triopo Stativ Carbon