Så lägger du till kartor i din app: inbäddningar, interaktiva kartor och butikssökare

För att lägga till en karta i din app avgör du först om du behöver en statisk inbäddning (en plats med en nål, som “hitta vår butik”) eller en interaktiv karta (många nålar från din data, filter, klustring, “nära mig”). För en enda plats är en inbäddad karta snabbast och, med Googles Maps Embed API, gratis. För interaktiva kartor använder du ett JavaScript-kartbibliotek — Google Maps JavaScript API, Mapbox GL JS eller det öppna Leaflet med en leverantör av kartbitar — lagrar varje plats latitud och longitud i din databas och begränsar din API-nyckel till din egen domän. Uppgifter om leverantörerna nedan är från varje leverantörs egen dokumentation från och med september 2026.

Vilken typ av karta behöver du?

De flesta små företagswebbplatser behöver bara den första raden. Kataloger, marknadsplatser och listningssidor behöver den tredje och fjärde.

Dina alternativ

Google Maps Platform

Googles startguide säger att du måste skapa ett Cloud-projekt med fakturering aktiverad och aktivera de API:er du vill ha. Dess betala-per-användning-prissättning ger Essentials-SKU:er, inklusive Dynamic Maps, en gräns på 10 000 gratis händelser per månad, och anger Dynamic Maps till 7,00 USD per 1 000 händelser över det (på första volymnivån). Maps Embed-SKU:n anges som obegränsad och gratis. Google säljer också månatliga prenumerationsplaner. Kontrollera Google Maps Platforms priser för aktuella siffror.

Mapbox

Mapboxs prissida anger 50 000 gratis kartladdningar per månad för Mapbox GL JS på webben, sedan 5,00 USD per 1 000 laddningar. Se Mapbox-priser.

Leaflet och OpenStreetMap

Leaflet beskriver sig som ett JavaScript-bibliotek med öppen källkod för mobilanpassade interaktiva kartor, cirka 42 KB JavaScript. Det behöver kartbitar (bilderna av kartan) från någonstans. OpenStreetMaps publika kartservrar är frestande, men policyn för kartbitar kräver synlig attribution, förbjuder massnedladdning, erbjuder ingen tjänstegaranti och varnar att kommersiella tjänster kan förlora åtkomsten. För en riktig produkt, använd en kommersiell eller egen kartbitskälla som fungerar med Leaflet.

API-nycklar: offentliga, men begränsade

Kartnycklar som används i webbläsaren är synliga för alla som öppnar din sida. Det är väntat, men det betyder att någon kan kopiera din nyckel och köra upp användningen på din räkning. Googles säkerhetsvägledning är att lägga till begränsningar för webbplatser (HTTP-referrer) med dina domäner, och API-begränsningar så att nyckeln bara fungerar för de API:er du använder.

Nycklar för tjänster på servern — till exempel geokodning av tusentals adresser — bör vara separata nycklar som hålls i serverhemligheter, inte på sidan. Ställ också in budgetlarm eller kvoter i leverantörens konsol så att ett misstag inte kan bli en stor räkning.

Geokodning: gör om adresser till koordinater en gång

Kartor visar latitud och longitud, inte adresser. Att omvandla en adress till koordinater kallas geokodning, och de flesta leverantörer tar betalt per förfrågan. Det effektiva mönstret:

1. När en annons sparas, geokoda dess adress på servern.
2. Lagra latitud och longitud i databasen.
3. Kartan läser lagrade koordinater; den geokodar aldrig vid sidvisning.

Kontrollera varje leverantörs villkor för hur länge du får lagra geokodningsresultat; de skiljer sig.

Exempelprompter

En enda inbäddad karta:

På kontaktsidan, lägg till en inbäddad Google-karta som visar vår adress (12 High Street, Leeds) med Maps Embed API och nyckeln i GOOGLE_MAPS_EMBED_KEY. Lägg till en länk “Visa vägen” under den. Gör den över hela bredden på telefoner och ladda den lazy.

En interaktiv karta över annonser:

Lägg till latitud och longitud i tabellen listings. När en annons skapas eller dess adress ändras, geokoda den på servern med nyckeln i GEOCODING_API_KEY och spara koordinaterna. På sidan Bläddra, visa en karta med en nål per annons med Leaflet, med klustring när nålar överlappar. Ett klick på en nål visar titel, pris och en länk. Kartan och listan ska använda samma filter.

“Nära mig”:

Lägg till en knapp “Nära mig” som ber om besökarens plats och visar annonser inom 10 km, sorterade efter avstånd. Om de avvisar platsåtkomst, låt dem skriva in en stad i stället.

Steg för steg

1. Välj kartans typ från tabellen överst.
2. Skapa leverantörskontot och ett projekt, och aktivera bara de API:er du behöver.
3. Skapa nycklar: en webbläsarnyckel begränsad till dina domäner (inklusive din förhandsvisningsdomän under bygget) och, om det behövs, en serverna för geokodning.
4. Lagra nycklarna som hemligheter och be din byggare att använda dem; webbläsarnyckeln är fortfarande begränsad även om den hamnar på sidan.
5. Lagra koordinater för varje plats i din databas.
6. Bygg kartan: nålar, popup-fönster, klustring och en rimlig standardzoom.
7. Kombinera den med en lista. En karta ensam är svår att använda på telefon och för skärmläsare. Visa samma resultat som en lista.
8. Ställ in ett budgetlarm i leverantörens konsol.
9. Publicera och testa på den live-domänen, eftersom begränsningar för referrer ofta blockerar kartan tills live-domänen läggs till.

Vanliga misstag

• Obegränsade nycklar. Vem som helst kan återanvända dem på sin egen sajt.
• Geokodning vid varje sidvisning. Långsamt och dyrt; geokoda en gång vid sparande.
• Att glömma live-domänen i nyckelbegränsningarna. Fungerar i förhandsvisningen, tom grå ruta i produktion.
• Kartbaserade layouter utan lista. Nålar utan lista är besvärliga på små skärmar och otillgängliga.
• Hundratals nålar utan klustring. Oläsligt och långsamt.
• Saknad attribution. De flesta kart- och kartbitsleverantörer kräver den, och att dölja den bryter deras villkor.
• Att fråga efter plats vid sidladdning. Fråga bara när användaren trycker på “Nära mig”.

Checklista

• Rätt kartatyp vald för jobbet
• Webbläsarnyckel begränsad till dina domäner och de API:er som behövs
• Nycklar på servern hålls i hemligheter
• Koordinater lagrade i databasen, geokodade en gång
• Resultaten visas också som en lista
• Klustring för många nålar
• Attribution synlig
• Budgetlarm satt hos leverantören
• Testad på den publicerade domänen och på telefon

Lägga till kartor med Mythex

Mythex har ingen inbyggd kartintegration; du tar med din egen leverantörsnyckel, lägger den som en projekthemlighet (eller klistrar in den när agenten visar ett hemlighetskort) och ber om kartan i chatten, så som beskrivs i Integrera valfritt API. Koordinater hamnar i projektets databas. Kom ihåg att lägga till både din förhandsvisnings- och publicerade domän i nyckelns begränsningar för webbplatser, och publicera igen efter att du ändrat hemligheter.

Kartor ligger oftast intill sök och listor: se hur du lägger till sök i din app, hur du bygger en katalogwebbplats och hur du bygger en webbplats för små företag.

Frågor