Kaarten toevoegen aan uw app: insluitingen, interactieve kaarten en winkelzoekers

Om een kaart aan uw app toe te voegen, beslist u eerst of u een statische insluiting nodig hebt (één locatie met een speld, zoals „vind onze winkel“) of een interactieve kaart (veel spelden uit uw gegevens, filters, clustering, „bij mij in de buurt“). Voor één locatie is een ingesloten kaart het snelst en, met de Maps Embed API van Google, gratis. Voor interactieve kaarten gebruikt u een JavaScript-kaartbibliotheek — de Google Maps JavaScript API, Mapbox GL JS, of het open-source Leaflet met een tileprovider — slaat u de breedte- en lengtegraad van elke plek op in uw database, en beperkt u uw API-sleutel tot uw eigen domein. Gegevens van leveranciers hieronder komen uit hun eigen documentatie, stand september 2026.

Welk type kaart hebt u nodig?

De meeste kleine zakelijke sites hebben alleen de eerste rij nodig. Directory's, marktplaatsen en vergelijkingssites hebben de derde en vierde rij nodig.

Uw opties

Google Maps Platform

De startgids van Google zegt dat u een Cloud-project met facturatie moet aanmaken en de API's moet inschakelen die u wilt gebruiken. De pay-as-you-go-prijzen geven Essentials-SKU's, waaronder Dynamic Maps, een gratis maandelijks limiet van 10.000 gebeurtenissen, en vermelden Dynamic Maps tegen $7,00 per 1.000 gebeurtenissen daarboven (in de eerste volumeschijf). De Maps Embed-SKU staat vermeld als onbeperkt en gratis. Google verkoopt ook maandelijkse abonnementen. Controleer de prijzen van Google Maps Platform voor de actuele cijfers.

Mapbox

De prijspagina van Mapbox vermeldt 50.000 gratis kaartladingen per maand voor Mapbox GL JS op het web, daarna $5,00 per 1.000 ladingen. Zie prijzen van Mapbox.

Leaflet en OpenStreetMap

Leaflet noemt zichzelf een open-source JavaScript-bibliotheek voor mobielvriendelijke interactieve kaarten, ongeveer 42 KB aan JavaScript. Het heeft kaarttegels (de afbeeldingen van de kaart) nodig van ergens. De openbare tileservers van OpenStreetMap zijn verleidelijk, maar het tilegebruiksbeleid vereist zichtbare bronvermelding, verbiedt bulkdownloaden, biedt geen servicegarantie en waarschuwt commerciële diensten dat de toegang kan worden ingetrokken. Voor een echt product gebruikt u een commerciële of zelf gehoste tilebron die met Leaflet werkt.

API-sleutels: openbaar, maar beperkt

Kaartsleutels die in de browser worden gebruikt, zijn zichtbaar voor iedereen die uw pagina opent. Dat is verwacht, maar het betekent dat iemand uw sleutel kan kopiëren en het gebruik op uw rekening kan laten oplopen. De beveiligingsrichtlijn van Google is om beperkingen op de HTTP-verwijzer (website-restricties) toe te voegen met uw domeinen, en API-beperkingen zodat de sleutel alleen werkt voor de API's die u gebruikt.

Sleutels voor serverdiensten — bijvoorbeeld het geocoderen van duizenden adressen — moeten aparte sleutels zijn, bewaard in geheimen op de server, niet in de pagina. Stel ook budgetmeldingen of quota in de console van de provider in, zodat een vergissing niet tot een grote rekening kan leiden.

Geocoderen: adressen één keer omzetten in coördinaten

Kaarten tonen breedte- en lengtegraad, geen adressen. Een adres omzetten naar coördinaten heet geocoderen, en de meeste aanbieders rekenen daar per verzoek voor. Het efficiënte patroon:

1. Wanneer een vermelding wordt opgeslagen, geocodeert u het adres op de server.
2. Sla de breedte- en lengtegraad op in de database.
3. De kaart leest opgeslagen coördinaten; hij geocodeert nooit bij het bekijken van de pagina.

Controleer de voorwaarden van elke aanbieder over hoe lang u geocoderingsresultaten mag opslaan; die verschillen.

Voorbeeldprompts

Een enkele ingesloten kaart:

Voeg op de contactpagina een ingesloten Google-kaart toe met ons adres (12 High Street, Leeds) via de Maps Embed API, met de sleutel in GOOGLE_MAPS_EMBED_KEY. Zet er onder een link „Route tonen“. Maak hem op telefoons volledige breedte en laad hem lui.

Een interactieve kaart met vermeldingen:

Voeg breedte- en lengtegraad toe aan de tabel vermeldingen. Wanneer een vermelding wordt aangemaakt of het adres verandert, geocodeer het dan op de server met de sleutel in GEOCODING_API_KEY en sla de coördinaten op. Toon op de pagina Bladeren een kaart met een marker per vermelding via Leaflet, met clustering wanneer markers elkaar overlappen. Klikken op een marker toont de titel, prijs en een link. Kaart en lijst gebruiken dezelfde filters.

„Bij mij in de buurt“:

Voeg een knop „Bij mij in de buurt“ toe die de locatie van de bezoeker vraagt en vermeldingen binnen 10 km toont, gesorteerd op afstand. Als hij toegang tot de locatie weigert, laat hem dan een stad intypen.

Stap voor stap

1. Kies het kaarttype uit de tabel bovenaan.
2. Maak het account bij de provider en een project aan, en schakel alleen de API's in die u nodig hebt.
3. Maak de sleutels: een browsersleutel beperkt tot uw domeinen (inclusief uw previewdomein tijdens het bouwen) en, indien nodig, een serversleutel voor geocoderen.
4. Bewaar de sleutels als geheimen en vraag uw builder ze te gebruiken; de browsersleutel blijft beperkt, ook al komt hij in de pagina terecht.
5. Sla coördinaten op voor elke plek in uw database.
6. Bouw de kaart: markers, pop-ups, clustering en een verstandig standaardzoomniveau.
7. Koppel er een lijst aan. Een kaart alleen is lastig op een telefoon en voor schermlezers. Toon dezelfde resultaten als lijst.
8. Stel een budgetmelding in in de console van de provider.
9. Publiceer en test op het live domein, omdat verwijzerbeperkingen de kaart vaak blokkeren tot het live domein is toegevoegd.

Veelgemaakte fouten

• Onbeperkte sleutels. Iedereen kan ze hergebruiken op de eigen site.
• Geocoderen bij elke paginaweergave. Traag en duur; geocodeer eenmaal bij het opslaan.
• Het live domein vergeten in de sleutelbeperkingen. Werkt in preview, leeg grijs vak in productie.
• Kaarten zonder lijst. Spelden zonder lijst zijn lastig op kleine schermen en ontoegankelijk.
• Honderden markers zonder clustering. Onleesbaar en traag.
• Ontbrekende bronvermelding. De meeste kaart- en tileproviders vereisen die, en verbergen ervan breekt hun voorwaarden.
• Locatie vragen bij het laden van de pagina. Vraag het alleen wanneer de gebruiker op „Bij mij in de buurt“ tikt.

Checklist

• Juist kaarttype gekozen voor de taak
• Browsersleutel beperkt tot uw domeinen en de vereiste API's
• Sleutels voor de server bewaard in geheimen
• Coördinaten opgeslagen in de database, eenmaal gegeocodeerd
• Resultaten ook als lijst getoond
• Clustering bij veel markers
• Bronvermelding zichtbaar
• Budgetmelding ingesteld bij de provider
• Getest op het gepubliceerde domein en op een telefoon

Kaarten toevoegen met Mythex

Mythex heeft geen ingebouwde kaartintegratie; u brengt uw eigen providersleutel mee, voegt die toe als projectgeheim (of plakt hem wanneer de agent een geheimenkaart toont), en vraagt om de kaart in de chat, zoals beschreven in Elke API integreren. Coördinaten gaan in de database van het project. Vergeet niet zowel uw preview- als uw gepubliceerde domein toe te voegen aan de website-beperkingen van de sleutel, en publiceer opnieuw na het wijzigen van geheimen.

Kaarten staan meestal naast zoeken en vermeldingen: zie hoe u zoeken aan uw app toevoegt, hoe u een directorywebsite bouwt en hoe u een website voor een klein bedrijf bouwt.

Veelgestelde vragen