„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…

35 comments

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

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

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

      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

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

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

      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.

        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.

          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]

          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?

  4. 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“

    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?

        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!

  5. 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!

  6. 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…

    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)…

      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.

        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!

Schreibe einen Kommentar

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