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.

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!

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