Drücke „Enter”, um zum Inhalt zu springen.
Ausprobieren
Online Webseiten-Check
sofort das Ergebnis sehen
Auf meiner Webseite sind externe Links mit dem Symbol gekennzeichnet. Datenschutzhinweise · Wissensartikel

Interaktive Karte mit beliebig vielen Standorten: Plugin als Google Maps Ersatz

Konfigurator für mehrere Standorte auf der Karte

Plugin für 1) JavaScript (allgemein) und 2) WordPress

Auf der Karte werden alle Standorte gleichzeitig angezeigt.

Demo ansehen

Standorte angeben

Bitte Standorte angeben (jeder Standort wird auf je einer eigenen Karte angezeigt). Nur Standorte in Deutschland!

Koordinaten ermitteln

Nutzen Sie hierfür einen externen Dienst, etwa
  • OSM direkt: Nach Adresseingabe und erfolgreicher Suche: Koordinaten stehen in der Adresse (URL) im Browser (etwa "...#map=12/50.2255/8.3039" --> 8.3039,50.2255 unten eingeben)
  • OSM Adress-Suchservice: Nach Adresseingabe und erfolgreicher Suche: Button Details anklicken, dort Angaben zum "Centre Point (lat,lon)" herauskopieren und unten in das Textfeld in umgekehrter Reihenfolge (zuerst Breiten-, dann Längengrad) reinkopieren (Beispiel: 8.2416556,50.0820384 für Wiesbaden

Koordinaten der Standorte eingeben

Pro Standort eine Zeile. Pro Zeile die Geo-Koordinaten, etwa so: 14.3,50.4 (Punkt = Dezimalpunkt, Komma = Trenner zwischen Koordinaten)
Optional pro Standort nach der zweiten Koordinate mit Komma getrennt ein Beschriftungstext, etwa so: 14.3,50.4,Mein Standort 1

Marker für Standorte wählen

OK. Installationsdateien stehen bereit

Webseite angeben

In welche Webseite soll die Karte eingebunden werden? Die Angabe hilft beim Schutz der Karte (Erkennung erlaubter Anfragen).
Es reicht die Angabe der Hauptadresse ohne http oder https (Beispiel: xyzabc.de)
Webseite:

Variante (optional)

Nur für mehrere Karten pro Webseite, nur ab der 2. Karte relevant
Erste Karte: Variante = 0. Weitere Karten: Jeweils eigene Variante ab Ziffer 2 wählen
Variante:

Anregung, Frage, Problem melden

Nachricht schreiben

Alle folgenden Informationen sind auch in den Installationsdateien enthalten, die zum Heruntergeladen bereitgestellt werden.

Installation JavaScript-Plugin

Für WordPress-Installation: siehe Abschnitt weiter unten!

Vorgehen:

  1. Aus der Download-Datei (ZIP-Datei): Verzeichnis interaktive_karte auf den Server Ihrer Webseite in das Hauptverzeichnis kopieren
  2. Script einbinden, am besten im HEAD-Bereich:
    <script type=”text/javascript”src=”/interaktive_karte/karte.js”></script>
  3. Karte einbinden durch Hinzufügen eines Elements mit der ID drdsgvo_map, dort, wo die Karte erscheinen soll. Etwa so:
    <div id=”drdsgvo_map”></div>

    Optional kann das DIV-Element bezüglich Breite, Höhe, Rahmen etc. mit CSS-Befehlen gestaltet werden. Beispiel:
    <div id=”drdsgvo_map” style=”width:100%;height:100%;max-width:800px;max-height:600px;”></div>

Installation WordPress Plugin

Das Plugin oben herunterladen. Dann im WordPress Dashboard (als Administrator o.ä.) das Plugin durch Hochladen installieren. Dann das Plugin aktivieren.

Auf der Seite, wo eine Karte angezeigt werden soll, folgenden Shortcode verwenden:

[karte_drdsgvo]

Wenn mehrere Karten pro Webseite genutzt werden sollen, kann eine andere Variantennummer verwendet werden (siehe Eingabefeld ganz oben). Für die Variante mit der Nummer 2 würde der Shortcode wie folgt lauten:

[karte_drdsgvo_2]

Datenschutztext einbinden (bitte bitte, ich bestehe darauf = Voraussetzung für die Nutzung der Karte):
Interaktive Karte
Diese Webseite verwendet eine interaktive Karte von Dr. DSGVO. Die Karte dient zum Anzeigen mehrerer Standorte und wird lokal betrieben. Diese Lösung ist datenschutzfreundlich. Beim Abruf und Betrieb der Karte werden keine personenbezogenen Daten an Dritte weitergegeben. Weiterhin werden von uns für den Abruf und Betrieb der Karte keine personenbezogenen Daten außer den technisch notwendigen erhoben. Die Karte verwendet keine Cookies.

–> den Text „interaktive Karte von Dr. DSGVO“ wie oben gezeigt mit dem dofollow-Link https://dr-dsgvo.de versehen.

Lizenz

Die Karte darf frei und auf eigenes Risiko verwendet werden. Eine Nutzung ist nur erlaubt, wenn sowohl auf der Karte als auch in der Datenschutzerklärung der einbindenden Webseite ein dofollow-Link auf https://dr-dsgvo.de vorhanden ist.

Anzeigegröße der Lizenzinfos auf der Karte

Die Darstellung der rechts unten auf der Karte anzeigten Lizenzangabe kann bei Bedarf angepasst werden. Dies ist nicht notwendig, sondern Ihnen überlassen. Hier der CSS-Code dafür:

<style>
.ol-attribution ul a {
  /* Schriftgröße */
  font-size:11px;
  /* Schriftart */
  font-family:"Roboto",sans-serif";
  /* Weitere Formatierungen mit CSS-Anwendungen */
  ...
}
</style>

Dieser Code muss auf der HTML-Seite integriert werden, wo die Karte erscheinen soll. Bitte setzen Sie eigene Werte ein und ersetzen Sie die drei Punkte durch eigene weitere Formatierungen. Entfernen Sie am besten die im eben gezeigten Code von mir angegebenen Kommentare.

Vollbild-Button

Auf der Karte befindet sich ein Button namens „Vollbild“. Klickt der Nutzer hierauf, wird in einem neuen Fenster die Webseite openstreetmap.org mit den Koordinaten des Mittelpunkts der Standorte aufgerufen. Dieser Aufruf ist ein ganz gewöhnlicher externer Link. Wenn Sie den Button für das Vollbild ausblenden möchten, geht das mit diesem CSS-Code:

<style>
.drdsgvo_btn {
display:none !important;
}
</style>

Die Lösung ist pragmatisch ausgelegt und wird gemäß Bedarf weiterentwickelt.