Eine Anfahrtsbeschreibung und einen Routenplaner mit Google Maps erstellen

5

Eine Schulhomepage ohne Anfahrtsbeschreibung ist kaum vorstellbar. Eine Erweiterungskomponente mit der man eine einfache Wegbeschreibung erstellen kann gehört zu keinem mir bekannten CMS. Früher hatte ich auch eine extra Erweiterung, speziell um diese Möglichkeit nachzurüsten, auf meiner Homepage installiert.
Eine komplette Erweiterung nur um auf einer Seite einen Kartenausschnitt darzustellen und einen Wegbeschreibung zu erstellen!? Völlig unnötig!

So erstellen Sie eine kostenlose und interaktive Wegbeschreibung mit Routenplaneroption:

Der erste Weg führt uns zu Google Maps:

  1. Adresse der Schule bei Google Maps in das Suchfeld eingeben
  2. Auf die Lupe klicken
  3. Die Schule bzw. die Adresse wird auf der Karte mit einem Marker gekennzeichnet
  4. Unten rechts auf das Zahnrad klicken und "Karte teilen oder einbetten" wählen
  5. In dem sich nun öffnenden Fenster den Reiter "Karte einbetten" auswählen, danach können Sie sich für entweder eine vorgegebene oder eine benutzerdefinierte Kartengröße entscheiden
  6. Zum Schluss den Code, welcher mit "<iframe..." anfängt, in die Zwischenablage kopieren (STRG+C).
  7. Auf ihrer Homepage erstellen Sie nun einen neuen Beitrag, in dem Sie den kopierten Code mit STRG+V in der Quellcodeansicht (!) des Editors einfügen.
  8. Sie können vor oder nach dem Code noch einen beliebigen Einleitungs- bzw. Abschlusstext verfassen.
  9. Weisen Sie dem Beitrag einen neuen Menüpunkt zu und schon ist die interaktive Wegbeschreibung fertig.

Die Besucher sehen nun die Position ihrer Schule in dem Kartenausschnitt, sie können in der Karte mit der Maus hinein-/herauszoomen oder hin und her bewegen, die Karte in ihrer eigenen Kartensammlungen speichern (vorausgesetzt sie haben ein Google Konto), oder die Routenberechnung in einem neuen Fenster starten.


Teil 2 (Optional):

Zusätzlich können Sie noch ein kleines Script mit in den Beitrag einfügen, dann erhält der Besucher die Möglichkeit seine Routenberechnung schon auf Ihrer Seite starten zu können.

Wechseln Sie wieder in die Quellcodeansicht und fügen folgenden Code in Ihre Wegbeschreibungsbeitrag ein:

<form action="http://maps.google.de/" method="get" accept-charset="UTF-8" target="_blank"><fieldset><input id="daddr" type="hidden" name="daddr" value="Musterstrasse 69, 12345 Musterstadt" /></fieldset><fieldset><legend>Lassen Sie sich Ihre Route berechnen</legend> <label for="saddr">Ihre Adresse:</label><input id="saddr" type="text" name="saddr" /><button class="xxxxxx" style="yyyyyy" tabindex="0" name="Submit" type="submit">Berechnung starten</button></fieldset></form>


Bevor Sie alles abspeichern, müssen Sie noch die Adresse Ihrer Schule einfügen! Ersetzen Sie "Musterstrasse 69, 12345 Musterstadt" mit Ihren eigenen Daten.
Auch die anderen Texte können Sie nach Ihren Bedürfnissen beliebig anpassen:

  • Lassen Sie sich Ihre Route berechnen
  • Ihre Adresse:
  • Berechnung starten


Bitte Achten Sie darauf, dass Sie beim Ändern der Texte keine <> Zeichen löschen!

Wenn Sie sich mit CSS ein wenig auskennen, dann können Sie dem "Berechnung Starten"-Button eine CSS Klasse zuweisen (xxxxxx), oder den Style (yyyyyy) verändern, damit der Button besser an Ihr Homepagedesign angepasst wird.  
Wenn Sie die Beiden Befehle (class="xxxxxx" style="yyyyyy" ) nicht benötigen, dann löschen Sie sie einfach.

Viel Spaß mit Ihrer neuen Wegbeschreibung mit Routenplaner!

Sie möchten eine Benachrichtigung bei einem neuen Beitrag zu einem Stichwort? Dies können Sie eingeloggt im Stichwortverzeichnis aktivieren und bei "Einstellungen" > "Privatsphäre" verwalten.

Kommentare

Realschule Meinersen Realschule Meinersen ,
Schöner Artikel. Lässt sich bei Joomla auch mit Plugins realisieren. Wenn ist doch iframes nutzen möchtet, ist hier ein wichtiger Hinweis (Joomla 3.x): iframes sind bei Joomla standardmäßig deaktiviert. Über das Backend / System / Konfiguration / Textfiltereinstellungen kann die Blacklist abgeändert werden. Das müsste bei Joomla 2.5.x auch so sein. LG Uwe Hecht

Märkisches Gymnasium Iserlohn Admin Schulhomepage.de ,
Toller Artikel! Danke!


Artikel mit denselben Stichwörtern

Routenplaner für die HP

16. Oktober 2014 um 16:51 Uhr 0 Kommentare
0
Tutorial: So einfach können Sie einen Artikel auf Schulhomepage.de schreiben

Tutorial: So einfach können Sie einen Artikel auf Schulhomepage.de schreiben

23. April 2015 um 17:50 Uhr 2 Kommentare
5

Joomla- Newsscroller

22. Februar 2015 um 10:41 Uhr 0 Kommentare
3

Gestaltung von Bildern und Schmuckgrafiken mit Ooo4kids - open source

07. Februar 2015 um 15:30 Uhr 0 Kommentare
0
FAQ Seite mit Shortcodes in  Joomla 3.3.6 erstellen

FAQ Seite mit Shortcodes in Joomla 3.3.6 erstellen

25. Februar 2015 um 18:07 Uhr 1 Kommentare
5
Besucher

Besucher

7 Kommentare
0
Tote Links finden

Tote Links finden

12. Juni 2016 um 09:25 Uhr 1 Kommentare
0

Fördervereinsarbeit effinzient halten...

23. Juli 2014 um 18:11 Uhr 1 Kommentare
4

cms4people.de

26. Oktober 2014 um 20:43 Uhr 2 Kommentare
5

Blappsta - machen Sie aus Ihrer Wordpress Schulhomepage eine Smartphone App!

27. November 2014 um 11:36 Uhr 0 Kommentare
0



Webmaster, die diesen Artikel empfehlen, empfehlen auch folgende Artikel

Fördervereinsarbeit effinzient halten...

23. Juli 2014 um 18:11 Uhr 1 Kommentare
4
Newsletter verschicken

Newsletter verschicken

29. August 2014 um 18:35 Uhr 1 Kommentare
5

DAS JOOMLA! COMMUNITY TREFFEN 12.- 13. SEPTEMBER, KÖLN

03. September 2014 um 20:26 Uhr 1 Kommentare
5
Informationsfluss nach Interessengruppen

Informationsfluss nach Interessengruppen

09. Februar 2015 um 18:23 Uhr 1 Kommentare
5

Gestaltung einer Schulhomepage leicht gemacht

21. Februar 2015 um 14:25 Uhr 0 Kommentare
5

weitere Artikel der Kategorie Content Management System