„The Events Calendar“ mit OpenStreetMaps statt Google Maps

Ein sehr beliebtes Kalender-Plugin ist The Events Calendar…auch schon in der kostenlosen Basisversion wunderbar und meistens ausreichend.

Man kann auch automatisch Google Maps einbinden. Das kann aber datenschutzrechtlich problematisch sein, denn eingebundene GoogleMaps benutzen viele viele Cookies und viele Tracker, um den Besucher der WebSite zu identifizieren und nachzuverfolgen. Das sollte man abschalten!

Eine Möglichkeit, OpenStreetMaps statt Google Maps einzubinden sucht man vergeblich. Auch der Support vom Events Calendar ist da eher lustlos: „Danke für deine Anfrage. Im Moment machen wir ganz viele Sachen, und evtl. ist dieses Feature auch schon dabei. Ansonsten schreib das doch einfach auf die Wishlist. Wir melden uns bei dir wann wir uns dransetzen.“ Tja…das Thema ist seit 4 Jahren in der Wishlist, und niemand hat sich je drangesetzt.

Also…setze ich mich halt mal dran 🙂

  1. Zuerst braucht man natürlich einen installierten  The Events Calendar mit mindestens einer Veranstaltung, die eine Adresse hat („Schnitzelbacher Straße 77a, 66321 Schmutzweiler“ z.B.). Jetzt im Admin-Bereich beiVeranstaltungen -> Einstellungen -> Allgemein -> Karteneinstellungen -> Google Karte aktivieren -> ankreuzen.Klar, dann kommt jetzt eine GoogleMap, aber die ist auch gleich wieder weg.
  2. Jetzt das Plugin Leaflet Map installieren. Das bindet wunderschöne OpenStreetMaps ein, mit wählbarem Stil (Wasserfarben etc.) und ist ganz leicht mit [shortcode] steuerbar.
  3. Jetzt muß man dem Events Calender nur noch sagen, daß er einen anderen Atlas nehmen soll:
    1. Die Datei the-events-calendar\src\views\modules\map.php finden
    2. und so wie oben in der Datei beschrieben  ins Theeme-Verzeichnis kopieren
      [your-theme]/tribe-events/modules/map.php
    3. Jetzt nur noch im Code ein paar Zeilen ändern. Das hier:

      $style = apply_filters( 'tribe_events_embedded_map_style', "height: $height; width: $width", $index );
      ?>
      <div id="tribe-events-gmap-<?php echo esc_attr( $index ) ?>" style="<?php echo esc_attr( $style ) ?>" aria-hidden="true"></div><!-- #tribe-events-gmap-<?php esc_attr( $index ) ?>

      ändern in

      $address = tribe_get_address( $venue_id ).", ".tribe_get_zip( $venue_id )." ".tribe_get_city( $venue_id ).", ".tribe_get_country( $venue_id );
      $shortcode  = '[leaflet-map address="'.$address.'" zoom="15" fit_markers="1"]';
      echo do_shortcode($shortcode);
      ?>

Fertig 🙂 Wer will kann bei der Karte jetzt noch mit diversen Shortcodes Aussehen und Verhalten ändern…

56 comments

  2. Hmm, für mich dann wohl nicht ganz so einfach. Ich wüsste nicht mal wie ich eine neue Seite dafür kreiere, und die nur die nötigen Daten alle anfordert.

    Antworten

  4. Hallo,
    ich bin Deiner Anleitung gefolgt. Es hat soweit geklappt. Gibt es eine Möglichkeit Zoom In/Out-Button in die Karte zu integrieren? Ist dies durch einen Shortcode möglich? Wo kann ich hier fündig werden?
    Danke,
    Niklas

    Antworten

      1. Meine maps.php ist ganz winzig:

        /**
        * Template used for maps embedded within single events and venues.
        * Override this template in your own theme by creating a file at:
        *
        * [your-theme]/tribe-events/modules/map.php
        *
        * @version 4.6.19
        *
        * @var $index
        * @var $width
        * @var $height
        */

        if ( ! defined( 'ABSPATH' ) ) {
        die( '-1' );
        }

        $address = tribe_get_address( $venue_id ).", ".tribe_get_zip( $venue_id )." ".tribe_get_city( $venue_id ).", ".tribe_get_country( $venue_id );

        $shortcode = '[leaflet-map address="'.$address.'" zoom="15" fit_markers="1"]';
        //$shortcode .= '[leaflet-marker address="'.$address.'"]';
        echo do_shortcode($shortcode);

        Antworten

      2. Aber diese Datei muß in dein Theme kopiert werden, sonst nimmt er die originale map.php, und die zeigt auf Google. Also hierhin:

        wp-content/themes/[your-theme]/tribe-events/modules/map.php

        Antworten
  5. Pingback: Open Street Maps con The Events Calendar plugin Wordpress | Raúl Pérez

  6. Hallo,
    Die Darstellung der Karte inkl. zoomcontrol funktioniert wunderbar.
    Wie kann ich dann noch zusätzlich einen Marker auf die Adresse anzeigen?
    Danke

    Antworten

    1. Dazu brauchst du einen weiteren Schortcode, direkt nach dem ersten.
      [leaflet-map…]
      und danach
      [leaflet-marker address=“‚.$address.‘, DE“]
      wobei du vorher irgendwie $address festlegen oder auslesen mußt.

      Ich mache das auf einer anderen Seite mit dem Plugin GigPress so:

      $str = '[leaflet-map lat=x lng=y zoom=5]';
      $address = $venue->venue_name.", ".$venue->venue_address.", ".$venue->venue_country."-".$venue->venue_postal_code." ".$venue->venue_city;
      $str .= ' [leaflet-marker address="'.$address.', DE"]
      '.$venue->venue_name.'[/leaflet-marker]';
      echo do_shortcode($str);

      Antworten

      1. Hallo,
        ich hab jetzt folgendes probiert:

        $address = tribe_get_address( $venue_id ).“, „.tribe_get_zip( $venue_id ).“ „.tribe_get_city( $venue_id ).“, „.tribe_get_country( $venue_id );
        $shortcode = ‚[leaflet-map zoomcontrol address=“‚.$address.'“ zoom=“16″ fit_markers=“1″]‘;
        $shortcode .= ‚[leaflet-marker address=“‚.$address.‘, DE“]‘;
        echo do_shortcode($shortcode);

        Leider habe ich dann nur den Marker auf einem grauen Hintergrund, keine Karte.

        Antworten

        1. Sorry, aber durch das kopieren aus notepad++ haben sich die führenden Hochkommas und Anführungszeichen verändert. In notepad++ ist das aber in Ordnung.

          Antworten

          1. Ja, dann mach den Code doch einfach so, daß er fehlerlos als PHP läuft.
            Ich verstehe das Problem nicht…

        2. Du mußt natürlich irgendwie eine Adresse haben. Ich erhalte die Adresse durch Datenbankabfragen für ein anderes Plugin.
          Hast du eine Adresse übergeben?
          Ich glaube dir fehlt der erste Shortcode:
          [leaflet-map lat=x lng=y zoom=5]

          Antworten

          1. So hier die korrigierte Darstellung:

            $address = tribe_get_address( $venue_id ).“, „.tribe_get_zip( $venue_id ).“ „.tribe_get_city( $venue_id ).“, „.tribe_get_country( $venue_id );
            $shortcode = ‚[leaflet-map zoomcontrol address=“‘.$address.’“ zoom=“16″ fit_markers=“1″]‘;
            $shortcode .= ‚[leaflet-marker address=“‘.$address.‘, DE“]‘;
            echo do_shortcode($shortcode);

            Das läuft ohne Fehlermeldung, jedoch scheint nur der Marker im 2. shortcode dargestellt zu werden, die Darstellung der Karte aus dem ersten shortcode fehlt.
            Die Adresse wird im ersten Befehl ermiittelt, wie in deinem Vorschlag.
            Nehme ich den shortcode mit dem marker wieder raus, wird auch die Karte richtig dargestellt.

            Sorry, aber ich sehe den Fehler nicht.

          2. Urgs…der Code sieht furchtbar aus. Aber wenn du meinst daß er funktioniert, dann isses wohl die Formatierung.
            Ich hatte auch schon mal sowas, weiß aber nicht was die Lösung war. Kommst du mit der Doku vom Leaflet-Plugin klar? Da stehen ein paar Shortcodes und Erklärungen dazu.
            Wenn du dir mit den Developer-Tools die Seite ansiehst…gibt es da irgendwo einen JavaScript-Fehler unter „Konsole“?
            Kann man die Seite irgendwo sehen?

  7. Hallo, ich habe es so probiert, bekomme aber irgendwei immer noch die google maps. ich musste das verzeichnis auch erst erstellen. Ich nutze das Theme „The simplest“

    Antworten

    1. Ja, das Verzeichnis mußt du erstellen, wenn noch nicht vorhanden. Und dann muß in das Verzeichnis eine map.php, die du laut Anleitung aus dem Plugin rauskopierst, und an den richtigen Ort im neuen Verzeichnis.
      Wenn die map.php nicht existiert oder am falschen Ort liegt, wird WordPress die originale map.php nehmen, und da wird die Google Map angezeigt.
      Bist du im richtigen Theme-Ordner? Hast du evtl. ein Child-Theme aktiviert?

      Antworten

        1. Ein ChildTheme ist toll und wichtig und sinnvoll. Googel‘ mal danach.
          Du kannst das natürlich alles auhc ohne ChildTheme machen…dann sind aber die Änderungen beim nächsten Update weg!

          Antworten

  9. Ganz so einfach war es doch nicht.

    Es funktioniert, wenn ich aus dem shortcode für die map fit-markers=“1″ herausnehme, sonst muss ich immer 2 mal – drücken egalwie derZoom eingestellt ist.

    So funktioniert es:

    $address = tribe_get_address( $venue_id ).“, „.tribe_get_zip( $venue_id ).“ „.tribe_get_city( $venue_id ).“, „.tribe_get_country( $venue_id );
    $shortcode = ‚[leaflet-map zoomcontrol address=“‚.$address.'“ zoom=“14″]‘;
    $shortcode .= ‚[leaflet-marker]‘;
    echo do_shortcode($shortcode);

    Die führenden Hochkommas und Anführungszeichen ändert übrigens das Kommentarfeld nach dem absenden!

    Antworten

  10. Sehr schöne Anleitung, nur leider für mich für das falsche Kalender-Plugin.
    Ich verwende das „All-in-One Event Calendar“, aber auch hier gibt es das Problem, dass ausschließlich die Verwendung von Google Maps möglich ist.
    Dort ist es übrigens beim Support genauso. Der Wunsch nach alternativen Karten besteht seit Jahren und auch hier wird man immer wieder vertröstet…

    Antworten

    1. Ja, die interessieren sich nicht dafür, und Datenschutz scheint auch kein Thema zu sein.
      Irgendwo in deinem Kalender-Plugin wird doch sicher der Link zur Google-Map generiert…in meinem Kalender-Plugin war es die Datei map.php.
      Diesen Google-Maps-Link mußt du ersetzen durch einen OSM-Link. (Und vorher natürlich das Leaflet-Plugin installieren)…

      Antworten

      1. > wird doch sicher der Link zur Google-Map generiert
        Ja, ich werde da mal auf die Suche gehen (müssen).
        Ich würde ja sogar auf den „The Events Calendar“ wechseln, aber viele der von mir eingetragenen Events bzw. Orte haben nun mal keine Adresse mit Straße, Hausnummer und Ort, sondern sind nur über Koordinaten zu finden.
        Dies wiederum ermöglicht jedoch nur die Pro-Version von „The Events Calendar“ für $89 pro Jahr.
        Da ich die Seite für einen e.V. betreute, bekomme ich das nicht beim Vorstand genehmigt und sehe es auch irgendwo selbst nicht ein.

        Antworten

        1. Dann kannst du ein Custom Field anlegen und die Koordinaten (soweit bekannt) dort eintragen.
          Danach der Programmierung sagen „Wenn Koordinaten vorhanden, dann nimm die. Ansonsten nimm Adresse“.
          Hab ich so gemacht…klappt!

          Antworten

  11. Hallo,
    herzlichen Dank für die gute Anleitung. Aber: Kann es sein, dass sich da zwischenzeitlich etwas geändert hat ? –
    Ich habe das genannte Script map.php in den Ordner mit den entsprechenden Änderungen kopiert: ..\themes\customizr-pro-childtheme\tribe-events\modules kopiert.
    Das Plugin leaflet-map ist natürlich installiert und aktiviert.
    Trotzdem erscheint die google map. Auch wenn ich zum Testen irgendeinen Text in das script zusätzlich schreibe (z. B. echo „hier bin ich“) erscheint das nicht.
    Getestet habe ich das in einer Testumgebung und einer lokalen Instanz (Laragon).
    Ich habe das Gefühl, dass das nicht (mehr ?) das richtige Script ist, das geändert werden muss.

    Antworten

      2. Hallo,
        ich habe das Problem jetzt gelöst:
        Jetzt (The Events Calendar Version 4.9.10 – Stand 10.11.2019) muss das folgende Script geändert werden:
        /wp-content/themes/das_ist_jetzt_dein_theme/tribe-events/modules/meta/map.php

        Der Code funktioniert mit Marker in der folgenden Art:

        < ? php
        /**
        * Single Event Meta (Map) Template
        *
        * Override this template in your own theme by creating a file at:
        * [your-theme]/tribe-events/modules/meta/map.php
        *
        * @package TribeEventsCalendar
        * @version 4.4
        */

        $map = tribe_get_embedded_map();

        if ( empty( $map ) ) {
        return;
        }

        ?>

        < ? php
        // Zeigt Openstreetmap:
        $address = tribe_get_address( $venue_id ).", ".tribe_get_zip( $venue_id )."
        ".tribe_get_city( $venue_id ).", ".tribe_get_country( $venue_id );
        $shortcode = '[leaflet-map zoomcontrol address="'.$address.'" zoom="14"]';
        /* $shortcode = '[leaflet-map zoomcontrol address="'.$address.'" zoom="16?
        fit_markers="1?]'; */
        $shortcode .= '[leaflet-marker address="'.$address.', DE"]';
        echo do_shortcode($shortcode);
        do_action( 'tribe_events_single_meta_map_section_end' );
        ?>

        Viele Grüße

        Antworten
  13. Pingback: The Events Calendar und OpenStreetMaps - Wordpress-Webseiten - einfach ! passend!

  16. Hi,

    vielen Dank für diesen Beitrag!

    Ein kurzer aktueller Erfahrungsbericht: Die Lösung von Hans-Gerd Gerhards habe ich nicht richtig zum Laufen bekommen. Die OSM wurde mir auf der Single-Event-Seite zwar angezeigt und hatte auch die richtige Adresse im Fokus, aber ich habe keinen Map-Pin angezeigt bekommen. Ich habe versucht, den Shortcode etwas zu tweaken, aber es hat auf die Schnelle nicht geklappt.

    Die leicht verstaubte Extension vom Hersteller ist zwar nicht mehr auf der Website gelistet, aber hier auf Github findet man sie noch: https://github.com/mt-support/tribe-ext-maps-openstreetmap

    Diese Extension hat bei mir immer noch funktioniert – zunächst hatte ich aber nur einen Marker auf grauem Grund, und kein Zoom-Control. Die Extension fügt aber einige Einstellungsmöglichkeiten hinzu (unten bei Veranstaltungen > Einstellungen > Allgemein). Und nachdem ich dort ein Zoom-Level definiert hatte (und ein Häkchen bei Zoom Control gesetzt hatte), hat es funktioniert.

    Dies trifft allerdings nur auf die Single Events zu, im „Map View“ der neuen TEC Views funktioniert die Extension leider nicht.

    Viele Grüße
    Alex

    Antworten

    1. Ich kann dazu im Moment gar nichts sagen, weil ich mir das ewig nicht mehr angesehen habe.
      Evtl. hat der Hersteller seine (Template-)Dateien umgebaut, so daß die meine Lösung jetzt nicht mehr ohne weiteres funktioniert.
      Eigentlich müßte das aber ähnlich funktionieren:
      Man baut irgendwo ein DIV ein und sagt „Du bist jetzt meine OSM-Karte“. Die Karte braucht Länge und Breite des Zielorts, die müssen also vorher ermittelt werden (PHP/MySQL).
      Dann noch einen Zoomfaktor aussuchen (z.B. 14) und zusammen mit den Koordinaten in den Link einbauen, dann haben wir sowas in der Art: https://www.openstreetmap.org/#map=14/49.2961/8.8213.
      Ich würd mich ja mal dransetzen, aber aus Zeitmangel geht Erwerbsarbeit derzeit vor.

      Antworten

  17. Hallo woyng,
    ich habe mich unter anderem von deinem Artikel hier inspirieren lassen, das ganze aktualisiert und noch weiter ausgebaut und eine komplette Anleitung (auf englisch) geschrieben: https://github.com/sobs0/tec-osm.
    Was mit der Anleitung erreicht werden kann: Anzeige von OpenStreetMap anstelle von Google Maps auf der Event-Detailseiten und auf der Seite des Veranstaltungsorts, Neuer Shortcode zur Anzeige einer Karte aller Veranstaltungsorte, Vermeiden die GoogleMaps API auf der Website zu laden, Anzeige eines Genehmigungsbanners für alle OpenStreet Maps die mit Leaflet Maps Shortcodes erstellt wurden, Leaflet js und css Dateien lokal hosten, Anzeige eines eigenen Markers.
    Wenn du magst kannst du es dir ansehen und gerne in deinem Artikel als Update aufnehmen (habe dich in meiner Anleitung auch verlinkt) 🙂 Freue mich natürlich auch auf dein Feedback!
    Viele Grüße

    Antworten

  18. Da hast du dir aber viel Arbeit gemacht 🙂
    Das Genehmigungsbanner für OSM hatte ich damals vergessen.
    Ich hab die Details meiner damaligen Lösung gar nicht mehr im Kopf…ist ja auch schon wieder 6 Jahre her. Freue mich aber sehr, daß ich in der Zeit schon vielen Leuten damit helfen konnte.

    > Note: These customisations will not replace Google Maps for the TEC Calendar Map view. > If you have a solution for that feel free to reach out to me to include this in the repository.

    Warum kriegst du die Googlemap hier nicht weg? Ist das eine native Funktion innerhalb TEC

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert