Ihr Standort auf einer Karte auf Ihrer Website

Eine Karte auf der Kontaktseite zeigt der Kundschaft, wo sie Sie findet. Diese hat einen Marker mit Ihrer Adresse und den Öffnungszeiten und einen Link, der auf dem Handy die Route öffnet. Es ist ein Block HTML für jede Website, und er braucht kein Google-Konto.

Drei Schritte

1. Erstellen Sie ein kostenloses Konto, und erstellen Sie im Dashboard einen Schlüssel vom Typ «Nur Karten». Tragen Sie Ihre Website als erlaubten Referer ein, zum Beispiel example.com, damit keine andere Website den Schlüssel verwenden kann.
2. Kopieren Sie den Code unten, und setzen Sie Ihren Schlüssel dort ein, wo IHR_SCHLÜSSEL steht.
3. Ändern Sie Name, Adresse, Öffnungszeiten und Position in shop, und fügen Sie den Code dort in Ihre Seite ein, wo die Karte erscheinen soll.

Wenn Sie kein HTML bearbeiten, schreibt Ihnen der Kartengenerator einen Code für WordPress, Wix, Squarespace und andere Baukästen: Adresse suchen, Aussehen wählen, kopieren.

<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.css">
<style>
  #map { height: 420px; border-radius: 8px; }
</style>

<div id="map"></div>

<script type="module">
import * as maplibregl from "https://unpkg.com/maplibre-gl@6.13.0/dist/maplibre-gl.mjs";

// Ihr Geschäft. Die Position ist Länge, Breite: Klicken Sie auf openstreetmap.org
// mit der rechten Maustaste auf den Ort und wählen Sie "Adresse anzeigen".
const shop = {
  name: "Bäckerei Muster",
  address: "Rennweg 10, 8001 Zürich",
  hours: "Mo–Fr 7:00–18:30, Sa 8:00–16:00",
  lon: 8.5394,
  lat: 47.3727
};

const map = new maplibregl.Map({
  container: "map",
  style: "https://api.overpass.ch/v1/IHR_SCHLÜSSEL/maps/styles/light.json?lang=de",
  center: [shop.lon, shop.lat],
  zoom: 16,
  cooperativeGestures: true // die Seite scrollt an der Karte vorbei; Ctrl + Mausrad oder zwei Finger bewegen sie
});
map.addControl(new maplibregl.NavigationControl({ showCompass: false }));

const directions = `https://www.google.com/maps/dir/?api=1&destination=${shop.lat},${shop.lon}`;
new maplibregl.Marker({ color: "#c0392b" })
  .setLngLat([shop.lon, shop.lat])
  // focusAfterOpen: false, damit die Seite beim Laden nicht zur Karte springt
  .setPopup(new maplibregl.Popup({ offset: 30, closeButton: false, focusAfterOpen: false }).setHTML(
    `<strong>${shop.name}</strong><br>${shop.address}<br>${shop.hours}<br>
     <a href="${directions}" target="_blank" rel="noopener">Route</a>`))
  .addTo(map)
  .togglePopup();
</script>

Die Position Ihres Geschäfts

Die Karte braucht Breite und Länge Ihres Eingangs. Zoomen Sie auf openstreetmap.org darauf, klicken Sie mit der rechten Maustaste darauf, und wählen Sie «Karte hier zentrieren». Die Adresse im Browser endet dann auf #map=19/47.37270/8.53940: die Zoomstufe, die Breite (lat im Code) und die Länge (lon).

In WordPress und Website-Baukästen

Fügen Sie in WordPress der Seite einen Block «Individuelles HTML» hinzu, und setzen Sie den Code ein. WordPress behält das Skript nur bei Benutzern, die ungefiltertes HTML veröffentlichen dürfen; in einer normalen Installation sind das Administratoren und Redakteure.

Wix, Squarespace, Webflow und die meisten anderen Baukästen haben ein Element für eingebetteten oder eigenen Code: Fügen Sie den Code dort ein. Setzt der Baukasten den Code in einen eigenen Rahmen, geben Sie dem Rahmen eine Höhe von etwa 450 Pixeln. Manche Abos dieser Baukästen erlauben keine Skripte.

In einer Seite, die Sie von Hand schreiben, kann die Zeile <link> auch in den <head>.

Route

Der Link öffnet Google Maps mit Ihrem Geschäft als Ziel, auf dem Handy in der App Google Maps. Er braucht keinen Schlüssel. Für Apple Karten verwenden Sie https://maps.apple.com/?daddr=47.3727,8.5394, für OpenStreetMap https://www.openstreetmap.org/directions?to=47.3727,8.5394.

Was es kostet

Die Karte lädt ihre Daten als Kartenkacheln, und jede Kachel zählt vom Kontingent Ihres Kontos. Wer die Karte nur ansieht, lädt 1 Kachel: Auf Zoomstufe 16 deckt eine Kachel die ganze Karte ab. Wer drei Stufen herauszoomt und die Karte viermal verschiebt, lädt 8 bis 14. Ein Browser behält die Kacheln einen Tag und prüft sie danach kostenlos, wer wiederkommt, kostet also bis zur wöchentlichen Aktualisierung der Karte fast nichts. Wir haben das mit MapLibre GL JS 6.13.0 in Fenstern von 1280 × 720 und 390 × 700 Pixeln gemessen.

Preise zuzüglich MWST. Alle Tarife: Maps-Tarife.

Cookies und Datenschutz

Die Karte setzt keine Cookies: Weder MapLibre noch unser Kartenserver verwenden welche. Der Browser der Besucherin oder des Besuchers fragt unsere Server in der EU nach den Kartenkacheln und schickt dabei seine IP-Adresse mit, wie bei jedem Bild von einem anderen Server. Der Code lädt MapLibre von unpkg.com. Um ausser den Kacheln nichts von anderen Servern zu laden, kopieren Sie den Ordner dist des npm-Pakets maplibre-gl auf Ihren Server und ändern die beiden Adressen.

Gut zu wissen

• Die Karte zeigt Daten von OpenStreetMap und wird jede Woche aktualisiert. Fehlt Ihre Strasse oder Ihr Geschäft oder ist falsch, kann es jede Person auf openstreetmap.org korrigieren, und die Karte zeigt es innert ein bis zwei Wochen.
• Die Quellenangabe © OpenStreetMap muss auf der Karte bleiben. Die Schaltfläche (i) in der Ecke öffnet sie.
• Für die Beschriftung in einer anderen Sprache ändern Sie lang=de in en, fr, it oder eine von 41 Sprachen. Für ein anderes Aussehen ändern Sie light in einen der neun Stile.
• Mehr als ein Standort: siehe den Filialfinder.