Karten in deine App einbauen: Einbettungen, interaktive Karten und Standortsuche

Um eine Karte in deine App einzubauen, entscheidest du zuerst, ob du eine statische Einbettung brauchst (ein Ort mit einer Markierung, etwa „So findest du uns“) oder eine interaktive Karte (viele Markierungen aus deinen Daten, Filter, Gruppierung, „In meiner Nähe“). Für einen einzelnen Ort ist eine eingebettete Karte am schnellsten und mit der Maps Embed API von Google kostenlos. Für interaktive Karten nutzt du eine JavaScript-Kartenbibliothek, also die Google Maps JavaScript API, Mapbox GL JS oder das Open-Source-Projekt Leaflet mit einem Kachelanbieter. Speichere für jeden Ort Breiten- und Längengrad in deiner Datenbank und beschränke deinen API-Schlüssel auf deine eigene Domain. Die Anbieterangaben unten stammen aus der jeweiligen Dokumentation und sind Stand September 2026.

Welche Karte brauchst du?

Die meisten kleinen Firmenseiten brauchen nur die erste Zeile. Verzeichnisse, Marktplätze und Angebotsseiten brauchen die dritte und vierte.

Deine Optionen

Google Maps Platform

Die Einstiegsanleitung von Google sagt, dass du ein Cloud-Projekt mit aktivierter Abrechnung anlegen und die gewünschten APIs aktivieren musst. Die Pay-as-you-go-Preise geben Essentials-SKUs, darunter Dynamic Maps, eine kostenlose monatliche Grenze von 10.000 Ereignissen, und nennen für Dynamic Maps darüber hinaus 7,00 $ pro 1.000 Ereignisse (in der ersten Mengenstufe). Das Maps-Embed-SKU ist als unbegrenzt und kostenlos angegeben. Google bietet außerdem monatliche Abo-Pakete an. Aktuelle Zahlen findest du auf der Preisseite von Google Maps Platform.

Mapbox

Die Preisseite von Mapbox nennt für Mapbox GL JS im Web 50.000 kostenlose monatliche Kartenaufrufe, danach 5,00 $ pro 1.000 Aufrufe. Siehe Mapbox-Preise.

Leaflet und OpenStreetMap

Leaflet beschreibt sich selbst als Open-Source-JavaScript-Bibliothek für mobilfreundliche interaktive Karten, etwa 42 KB JavaScript. Die Karte braucht Kacheln (die Bilder der Karte) aus einer Quelle. Die öffentlichen Kachelserver von OpenStreetMap sind verlockend, aber die Richtlinie zur Nutzung der Kacheln verlangt sichtbare Quellenangabe, verbietet massenhaften Download, bietet keine Dienstgarantie und warnt gewerbliche Dienste, dass der Zugang entzogen werden kann. Für ein echtes Produkt nutze eine kommerzielle oder selbst gehostete Kachelquelle, die mit Leaflet funktioniert.

API-Schlüssel: öffentlich, aber eingeschränkt

Kartenschlüssel, die im Browser verwendet werden, sind für jeden sichtbar, der deine Seite öffnet. Das ist normal, bedeutet aber, dass jemand deinen Schlüssel kopieren und deine Rechnung mit Nutzung hochtreiben kann. Googles Sicherheitsempfehlung lautet, Einschränkungen für Websites (HTTP-Referrer) mit deinen Domains und API-Einschränkungen zu setzen, damit der Schlüssel nur für die APIs funktioniert, die du nutzt.

Schlüssel für serverseitige Dienste, etwa das Geocoding Tausender Adressen, sollten eigene Schlüssel sein, die in Geheimnissen auf dem Server liegen, nicht auf der Seite. Richte außerdem Budgetwarnungen oder Kontingente in der Konsole des Anbieters ein, damit ein Fehler nicht zu einer hohen Rechnung wird.

Geocoding: Adressen einmal in Koordinaten umwandeln

Karten zeichnen Breiten- und Längengrad, keine Adressen. Eine Adresse in Koordinaten umzuwandeln heißt Geocoding, und die meisten Anbieter berechnen es pro Anfrage. Das effiziente Muster:

1. Beim Speichern eines Eintrags wird seine Adresse auf dem Server geocodiert.
2. Breiten- und Längengrad werden in der Datenbank gespeichert.
3. Die Karte liest gespeicherte Koordinaten; sie geocodiert nie beim Seitenaufruf.

Prüfe die Bedingungen jedes Anbieters, wie lange du Geocoding-Ergebnisse speichern darfst; sie unterscheiden sich.

Beispiel-Prompts

Eine einzelne eingebettete Karte:

Füge auf der Kontaktseite eine eingebettete Google-Karte mit unserer Adresse (12 High Street, Leeds) hinzu. Nutze die Maps Embed API mit dem Schlüssel aus GOOGLE_MAPS_EMBED_KEY. Setze darunter einen Link „Route anzeigen“. Auf Handys soll die Karte die volle Breite haben, und sie soll erst beim Scrollen geladen werden.

Eine interaktive Karte mit Einträgen:

Füge der Tabelle listings Breiten- und Längengrad hinzu. Wenn ein Eintrag angelegt wird oder sich seine Adresse ändert, geocodiere sie auf dem Server mit dem Schlüssel aus GEOCODING_API_KEY und speichere die Koordinaten. Zeige auf der Seite „Durchsuchen“ eine Karte mit einer Markierung pro Eintrag über Leaflet, mit Gruppierung, wenn sich Markierungen überlappen. Ein Klick auf eine Markierung zeigt Titel, Preis und einen Link. Karte und Liste sollen dieselben Filter nutzen.

„In meiner Nähe“:

Füge einen Button „In meiner Nähe“ hinzu. Er fragt den Standort des Besuchers ab und zeigt Einträge im Umkreis von 10 km, sortiert nach Entfernung. Lehnt er den Standortzugriff ab, kann er stattdessen eine Stadt eintippen.

Schritt für Schritt

1. Wähle den Kartentyp aus der Tabelle oben.
2. Lege das Konto beim Anbieter und ein Projekt an und aktiviere nur die APIs, die du brauchst.
3. Erstelle die Schlüssel: einen Browser-Schlüssel, der auf deine Domains beschränkt ist (während des Bauens auch auf deine Vorschau-Domain), und bei Bedarf einen Server-Schlüssel für Geocoding.
4. Speichere die Schlüssel als Geheimnisse und bitte deinen Builder, sie zu nutzen. Der Browser-Schlüssel bleibt beschränkt, auch wenn er auf der Seite landet.
5. Speichere Koordinaten für jeden Ort in deiner Datenbank.
6. Baue die Karte: Markierungen, Popups, Gruppierung und eine sinnvolle Standardzoomstufe.
7. Kombiniere sie mit einer Liste. Eine Karte allein ist auf dem Handy und für Screenreader schwer zu nutzen. Zeige dieselben Ergebnisse als Liste.
8. Richte eine Budgetwarnung in der Konsole des Anbieters ein.
9. Veröffentliche und teste auf der Live-Domain, denn Einschränkungen für Referrer blockieren die Karte oft, bis die Live-Domain hinzugefügt ist.

Häufige Fehler

• Unbeschränkte Schlüssel. Jeder kann sie auf seiner eigenen Seite wiederverwenden.
• Geocoding bei jedem Seitenaufruf. Langsam und teuer; geocodiere einmal beim Speichern.
• Die Live-Domain in den Schlüssel-Einschränkungen vergessen. Funktioniert in der Vorschau, in der Produktion ein leeres graues Feld.
• Layouts nur mit Karte. Markierungen ohne Liste sind auf kleinen Bildschirmen unbequem und nicht barrierefrei.
• Hunderte Markierungen ohne Gruppierung. Unlesbar und langsam.
• Fehlende Quellenangabe. Die meisten Karten- und Kachelanbieter verlangen sie; wer sie ausblendet, verstößt gegen deren Bedingungen.
• Den Standort beim Laden der Seite abfragen. Frag nur, wenn der Nutzer auf „In meiner Nähe“ tippt.

Checkliste

• Der richtige Kartentyp ist für die Aufgabe gewählt
• Browser-Schlüssel ist auf deine Domains und die nötigen APIs beschränkt
• Schlüssel für den Server liegen in Geheimnissen
• Koordinaten sind in der Datenbank gespeichert und einmal geocodiert
• Ergebnisse werden zusätzlich als Liste gezeigt
• Gruppierung bei vielen Markierungen
• Quellenangabe ist sichtbar
• Budgetwarnung beim Anbieter eingerichtet
• Auf der veröffentlichten Domain und auf dem Handy getestet

Karten mit Mythex einbauen

Mythex hat keine eingebaute Kartenintegration. Du bringst deinen eigenen Anbieter-Schlüssel mit, hinterlegst ihn als Projekt-Geheimnis (oder fügst ihn ein, wenn der Agent eine Geheimnis-Karte zeigt) und bittest im Chat um die Karte, wie in Beliebige API einbinden beschrieben. Die Koordinaten kommen in die Datenbank des Projekts. Denk daran, sowohl deine Vorschau- als auch deine veröffentlichte Domain bei den Website-Einschränkungen des Schlüssels einzutragen, und veröffentliche nach Änderungen an Geheimnissen erneut.

Karten stehen meist neben Suche und Einträgen. Siehe wie du Suche in deine App einbaust, wie du eine Verzeichnis-Website baust und wie du eine Website für ein kleines Unternehmen baust.

Fragen