Slik legger du til kart i appen din: innbygginger, interaktive kart og butikkfinnere

For å legge til et kart i appen din bestemmer du først om du trenger en statisk innbygging (ett sted med en nål, som «finn butikken vår») eller et interaktivt kart (mange nåler fra dine data, med filtre, gruppering og «i nærheten»). For ett sted er et innebygd kart raskest og, med Googles Maps Embed API, gratis. For interaktive kart bruker du et JavaScript-kartbibliotek: Google Maps JavaScript API, Mapbox GL JS, eller det åpen kildekode-baserte Leaflet med en leverandør av kartfliser. Lagre hvert steds breddegrad og lengdegrad i databasen, og begrens API-nøkkelen til ditt eget domene. Leverandørdetaljer nedenfor er fra hver leverandørs egen dokumentasjon per september 2026.

Hva slags kart trenger du?

De fleste små bedriftsnettsider trenger bare den første raden. Kataloger, markedsplasser og annonseringssider trenger den tredje og fjerde.

Dine alternativer

Google Maps Platform

Googles veiledning for å komme i gang sier at du må opprette et Cloud-prosjekt med fakturering aktivert og aktivere API-ene du vil bruke. Pay-as-you-go-prisingen deres gir Essentials-SKU-er, inkludert Dynamic Maps, en gratis grense på 10 000 hendelser i måneden, og oppgir Dynamic Maps til 7,00 USD per 1 000 hendelser over det (på første volumnivå). Maps Embed-SKU-en er oppført som ubegrenset og gratis. Google selger også månedlige abonnementsplaner. Sjekk Google Maps Platform-priser for oppdaterte tall.

Mapbox

Mapboxs prisside oppgir 50 000 gratis månedlige kartlastinger for Mapbox GL JS på nett, deretter 5,00 USD per 1 000 lastinger. Se Mapbox-priser.

Leaflet og OpenStreetMap

Leaflet beskriver seg selv som et åpen kildekode-JavaScript-bibliotek for mobilvennlige interaktive kart, på omtrent 42 KB JavaScript. Det trenger kartfliser (bildene av kartet) fra et sted. OpenStreetMaps offentlige flisservere er fristende, men retningslinjene for flisbruk krever synlig attribusjon, forbyr massenedlasting, tilbyr ingen tjenestegaranti, og advarer om at tilgang kan trekkes tilbake for kommersielle tjenester. For et ekte produkt bruker du en kommersiell eller selvhostet flisekilde som fungerer med Leaflet.

API-nøkler: offentlige, men begrenset

Kartnøkler som brukes i nettleseren er synlige for alle som åpner siden din. Det er forventet, men det betyr at noen kan kopiere nøkkelen din og kjøre opp bruken på regningen din. Googles sikkerhetsveiledning er å legge til nettside-begrensninger (HTTP-referrer) som lister opp domenene dine, og API-begrensninger slik at nøkkelen bare virker for API-ene du bruker.

Nøkler for tjenester på serversiden, for eksempel geokoding av tusenvis av adresser, bør være egne nøkler som holdes i hemmeligheter på serveren, ikke på siden. Sett også budsjettvarsler eller kvoter i leverandørens konsoll, slik at en feil ikke kan bli en stor regning.

Geokoding: gjør adresser om til koordinater én gang

Kart plotter breddegrad og lengdegrad, ikke adresser. Å gjøre om en adresse til koordinater kalles geokoding, og de fleste leverandører tar betalt per forespørsel. Det effektive mønsteret:

1. Når en oppføring lagres, geokodes adressen på serveren.
2. Breddegrad og lengdegrad lagres i databasen.
3. Kartet leser lagrede koordinater. Det geokoder aldri ved sidevisning.

Sjekk hver leverandørs vilkår for hvor lenge du får lagre geokodingsresultater. De varierer.

Eksempelprompter

En innebygd kartvisning:

På kontaktsiden, legg til et innebygd Google-kart som viser adressen vår (12 High Street, Leeds) ved hjelp av Maps Embed API, med nøkkelen i GOOGLE_MAPS_EMBED_KEY. Legg til en «Få veibeskrivelse»-lenke under. Gjør det full bredde på telefoner, og last det sent (lazy).

Et interaktivt kart over oppføringer:

Legg til breddegrad og lengdegrad i tabellen listings. Når en oppføring opprettes eller adressen endres, geokod den på serveren med nøkkelen i GEOCODING_API_KEY og lagre koordinatene. På Bla-siden viser du et kart med en nål per oppføring ved hjelp av Leaflet, med gruppering når nålene overlapper. Klikk på en nål viser tittel, pris og en lenke. Kartet og listen skal bruke de samme filtrene.

«I nærheten»:

Legg til en «I nærheten»-knapp som ber om besøkendes posisjon og viser oppføringer innen 10 km, sortert etter avstand. Hvis de avslår tilgang til posisjon, la dem skrive inn en by i stedet.

Steg for steg

1. Velg kartype fra tabellen øverst.
2. Opprett leverandørkontoen og et prosjekt, og aktiver bare API-ene du trenger.
3. Lag nøkler: en nettleser-nøkkel begrenset til domenene dine (inkludert forhåndsvisningsdomenet mens du bygger) og, hvis nødvendig, en server-nøkkel for geokoding.
4. Lagre nøklene som hemmeligheter og be AI-byggeren din bruke dem. Nettleser-nøkkelen er fortsatt begrenset selv om den ender opp på siden.
5. Lagre koordinater for hvert sted i databasen.
6. Bygg kartet: nåler, popup-vinduer, gruppering og et fornuftig standardzoomnivå.
7. Kombiner det med en liste. Et kart alene er vanskelig å bruke på telefon og for skjermlesere. Vis de samme resultatene som liste.
8. Sett et budsjettvarsel i leverandørkonsollen.
9. Publiser og test på live-domenet, siden nøkkelbegrensninger for referrer ofte blokkerer kartet til live-domenet er lagt til.

Vanlige feil

• Ubegrensede nøkler. Hvem som helst kan bruke dem på sin egen side.
• Geokoding ved hver sidevisning. Tregt og dyrt. Geokod én gang ved lagring.
• Å glemme live-domenet i nøkkelbegrensningene. Virker i forhåndsvisning, men gir et tomt grått felt i produksjon.
• Kartbaserte oppsett uten liste. Nåler uten liste er smertefullt på små skjermer og utilgjengelig.
• Hundrevis av nåler uten gruppering. Uleselig og tregt.
• Manglende attribusjon. De fleste kart- og flisleverandører krever den, og å skjule den bryter vilkårene deres.
• Å be om posisjon ved sidelasting. Be bare om det når brukeren trykker «I nærheten».

Sjekkliste

• Riktig kartype valgt for oppgaven
• Nettleser-nøkkel begrenset til dine domener og nødvendige API-er
• Nøkler på serveren holdt i hemmeligheter
• Koordinater lagret i databasen, geokodet én gang
• Resultater også vist som liste
• Gruppering for mange nåler
• Attribusjon synlig
• Budsjettvarsel satt hos leverandøren
• Testet på det publiserte domenet og på telefon

Legge til kart med Mythex

Mythex har ingen innebygd kartintegrasjon. Du tar med din egen leverandørnøkkel, legger den til som en prosjekthemmelighet (eller limer den inn når agenten viser et hemmelighetskort), og ber om kartet i chatten, slik beskrevet i Integrer ethvert API. Koordinater havner i prosjektets database. Husk å legge til både forhåndsvisnings- og publiserte domener i nøkkelens nettside-begrensninger, og publiser på nytt etter endring av hemmeligheter.

Kart ligger ofte ved siden av søk og oppføringer. Se hvordan legge til søk i appen din, hvordan bygge en katalogside og hvordan bygge en nettside for en liten bedrift.

Spørsmål