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.
      {rokbox}images/stories/tutorials/joomla_1.5/google_maps/googlemapscontent_3.jpg{/rokbox}
    • 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 ).

      {rokbox}images/stories/tutorials/joomla_1.5/google_maps/googlemapscontent_2.jpg{/rokbox}

    • 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:

[googlemaps]{Landkarte}[googlemaps]

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.

{rokbox}images/stories/tutorials/rokcandy/Macro_Editor.png{/rokbox}  {rokbox}images/stories/tutorials/rokcandy/macro_manager_2.png{/rokbox}  {rokbox}images/stories/tutorials/rokcandy/macro_manager_3.png{/rokbox}

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

 

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