Durch Anfahrtsskizzen können Webseitenbesucher dein Geschäft oder Restaurant einfacher finden. Obwohl Google Maps schon lange die Möglichkeit bietet eine Karte einzubinden, die einen Marker für das eigene Geschäft enthält, würde ich empfehlen OpenStreetMap zu verwenden.

OpenStreetMap⌗

OpenStreetMap (OSM) ist eine freie Karte, die von vielen ehrenamtlichen Mitarbeitern stetig korrigiert und weiterentwickelt wird. Gegenüber Google Maps bietet OpenStreetMap unter anderem folgende Vorteile:

  • Auswahl: Da die Kartendaten frei verfügbar sind, könnt ihr aus vielen verschiedenen Styles der Karten wählen (und sogar einen eigenen Style entwickeln)
  • Datenschutz: OpenStreetMap setzt nur technisch notwendige Cookies ein und es werden keine Daten an US-Unternehmen übertragen
  • Größe: Mit Leaflet als Kartenplugin statt des Google Maps iFrames werden etwa halb so viele Daten für das initialie Laden der Karte übertragen, was die Ladezeit der Seite (gerade für Smartphone Nutzer) verkürzen kann

Karte einbinden⌗

Das Einbinden von OpenStreetMap erfordert zwar mehr als nur 2 Klicks, ist aber mit ein wenig HTML und JavaScript schnell erledigt.

Leaflet⌗

Leaflet ist eine JavaScript Library, über die ihr Karten in eure Seite einbauen könnt. Es stellt Standardfunktionen wie Zoomen oder Verschieben der Karte und Setzen eines Markers bereit, kann darüberhinaus aber auch den eigenen Bedefürnissen angepasst werden.

Zuerst laden wir uns die aktuellste Version (Stable) von Leaflet runter. Wir könnten hier zwar auch die von Leaflet selbst gehosteten Dateien benutzen, aus Datenschutzgründen würde ich aber das Hosten auf dem eigenen Server bevorzugen. Nach dem Download entpacken wir die Datei leaflet.zip und verschieben den Ordner leaflet in das Root-Verzeichnis unserer Webseite.

HTML⌗

Um Leaflet einzubinden fügen wir die folgenden Zeilen in den <head>-Bereich unserer HTML-Datei hinzu:

<link rel="stylesheet" href="leaflet/leaflet.css" />
<script src="leaflet/leaflet.js"></script>

Anschließend erstellen wir den Container, in dem die Karte angezeigt werden soll. Über die CSS-Eigenschaften width und height können wir die Größe der Karte selbst festlegen:

<div id="map" style="width: 600px; height: 400px;"></div>

JavaScript⌗

Nun müssen wir etwas JavaScript benutzen, um Leaflet anzuweisen unsere Karte anzuzeigen. Hierzu erstellen wir eine Datei namens script.js und fügen folgenden Inhalt ein:

let coordinates = [52.55168, 13.36186]; // <- Gegen eigene Koordinaten ersetzen
let tile_url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
let map = L.map('map').setView(coordinates, 17);

L.tileLayer(tile_url, {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende'
}).addTo(map);
L.marker(coordinates).addTo(map);

In Zeile 1 definieren die Koordinaten unseres Geschäfts. Um diese herausfinden kann man zum Beispiel auf der OpenStreetMap-Karte einen Rechtsklick auf den eigenen Ort machen und auf “Adresse anzeigen” klicken. Die Koordinaten aus der Seitenleiste könnt ihr dann in die JavaScript-Datei einfügen.

Tiles (Kartenkacheln) sind quadratische Grafiken, aus denen die Karte zusammenegesetzt wird. Die Wahl des Tile-Servers bestimmt das Aussehen der Kartenkacheln. In Zeile 2 legen wir fest, dass wir den normalen OSM-Style benutzen. Alternativ können wir hier auch den deutschen Style verwenden, indem wir dort https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png eintragen. Da die OpenStreetMap-Daten auf viele verschiedene Arten gerendert werden können, gibt es darüber hinaus zahlreiche andere Styles zur Auswahl.

Zeile 3 legt das Zoom-Level fest (in diesem Fall 17) mit dem die Karte startet. Die anderen Zeilen dienen der Anzeige der Karte, des Copyright-Hinweises und des Markers.

Zu guter Letzt inkludieren wir die JavaScript-Datei in unserer HTML-Datei. Hierzu fügen wir vor den schließenden </body> Tag ein:

<script src="script.js"></script>

Das Ergebnis sieht dann in etwa so aus:

Anfahrtsskizze

Eigenen Marker verwenden⌗

Um der Karte einen individuellen Anstrich zu verleihen können wir auch eine selbst erstellte Marker-Grafik verwenden. Hierzu ersetzen wir in unserer JavaScript-Datei die Zeile 8 durch:

let icon = L.icon({
	iconUrl: 'marker.png',
	iconSize: [34, 47],
	iconAnchor: [17, 47],
});
L.marker(coordinates, {icon}).addTo(map);

Mit iconUrl legen wir den Pfad zu der Grafik fest, die als Marker verwendet werden soll (optimalerweise im PNG-Format). Bei iconSize geben wir die Breite und Höhe dieser Grafik in Pixeln an. iconAnchor (Ankerpunkt) gibt die Pixel-Koordinaten innerhalb der Grafik an, die auf unseren Ort zeigen sollen. Bei einem normalen Marker wäre das mitte unten, also die Hälfte der Breite des Bildes als X-Koordinate und die Höhe als Y-Koordinate:

Ankerpunkt

Hat alles geklappt wird das Ergebnis in etwa so aussehen und eure Kunden sind dankbar, dass sie euch leichter finden können:

Anfahrtsskizze mit eigenem Marker

Diesmal mit eigenem Marker (außerdem deutscher OSM-Style und niedrigeres Zoom-Level).

TL;DR⌗

Hier einmal der vollständige Code:

index.html⌗ 

<!DOCTYPE html>
<html>
  <head>
    <title>Kontakt</title>
    <link rel="stylesheet" href="leaflet/leaflet.css" />
    <script src="leaflet/leaflet.js"></script>
  </head>
  <body>
    <div id="map" style="width: 600px; height: 400px;"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js⌗ 

let coordinates = [52.55168, 13.36186]; // <- Gegen eigene Koordinaten ersetzen
let tile_url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
let map = L.map('map').setView(coordinates, 17);

L.tileLayer(tile_url, {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende'
}).addTo(map);
L.marker(coordinates).addTo(map);

script.js (mit eigenem Marker)⌗ 

let coordinates = [52.55168, 13.36186]; // <- Gegen eigene Koordinaten ersetzen
let tile_url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
let map = L.map('map').setView(coordinates, 17);

L.tileLayer(tile_url, {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>-Mitwirkende'
}).addTo(map);

let icon = L.icon({
	iconUrl: 'marker.png',
	iconSize: [34, 47],
	iconAnchor: [17, 47],
});
L.marker(coordinates, {icon}).addTo(map);