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:

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

Leider verlangt Google seit einiger Zeit eine API und die Registrierung. Man gibt sein Einverständnis, dass ab einer gewissen Anzahl Klicks Gebühren anfallen. Leider hat ein kleiner Webseitenbetreiber hier kaum die Möglichkeit, die Anzahl Klicks zu überprüfen, was die Sache ein bisschen zur Lotterie macht. Lotterie im negativen Sinne.

Der Artikel wird deshalb überarbeitet, sobald Zeit und Lust da sind. Wer Fragen hat, darf aber gerne fragen.

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