Sådan tilføjer du kort til din app: indlejringer, interaktive kort og butiksfindere

For at tilføje et kort til din app skal du først beslutte, om du har brug for en statisk indlejring (ét sted med en markør, som "find vores butik") eller et interaktivt kort (mange markører fra dine data, filtre, klyngedannelse, "i nærheden"). For ét sted er et indlejret kort hurtigst og, med Googles Maps Embed API, gratis. Til interaktive kort bruger du et JavaScript-kortbibliotek — Google Maps JavaScript API, Mapbox GL JS eller open source-biblioteket Leaflet med en tile-udbyder — gemmer hvert stedes breddegrad og længdegrad i din database, og begrænser din API-nøgle til dit eget domæne. Leverandørdetaljerne nedenfor er fra hver udbyders egen dokumentation pr. september 2026.

Hvilken type kort har du brug for?

De fleste små virksomhedssites har kun brug for den første række. Fortegnelser, markedspladser og opslagssites har brug for den tredje og fjerde.

Dine muligheder

Google Maps Platform

Googles kom-i-gang-guide siger, at du skal oprette et Cloud-projekt med fakturering aktiveret og aktivere de API'er, du vil bruge. Deres pay-as-you-go-prissætning giver Essentials-SKU'er, inklusive Dynamic Maps, med en gratis månedlig grænse på 10.000 hændelser, og oplister Dynamic Maps til 7,00 USD pr. 1.000 hændelser derudover (ved den første volumenkategori). Maps Embed-SKU'en er oplistet som ubegrænset og gratis. Google sælger også månedlige abonnementer. Se Google Maps Platform-priser for de aktuelle tal.

Mapbox

Mapboxs prisside oplister 50.000 gratis månedlige kortindlæsninger for Mapbox GL JS på nettet, derefter 5,00 USD pr. 1.000 indlæsninger. Se Mapbox-priser.

Leaflet og OpenStreetMap

Leaflet beskriver sig selv som et open source-JavaScript-bibliotek til mobilvenlige interaktive kort, cirka 42 KB JavaScript. Det har brug for kort-tiles (billederne af kortet) fra et sted. OpenStreetMaps offentlige tile-servere er fristende, men politikken for brug af tiles kræver synlig kildeangivelse, forbyder massehentning, tilbyder ingen servicegaranti og advarer kommercielle tjenester om, at adgangen kan trækkes tilbage. Til et rigtigt produkt, brug en kommerciel eller selvhostet tile-kilde, der virker med Leaflet.

API-nøgler: offentlige, men begrænsede

Kortnøgler, der bruges i browseren, er synlige for alle, der åbner din side. Det er forventet, men det betyder, at nogen kan kopiere din nøgle og køre forbruget op på din regning. Googles sikkerhedsvejledning er at tilføje begrænsninger for websted (HTTP-referrer) med dine domæner, og API-begrænsninger, så nøglen kun virker for de API'er, du bruger.

Nøgler til server-side tjenester — for eksempel geokodning af tusindvis af adresser — bør være separate nøgler, gemt i hemmeligheder på serveren, ikke på siden. Sæt også budgetadvarsler eller kvoter i udbyderens konsol, så en fejl ikke kan blive til en stor regning.

Geokodning: omsæt adresser til koordinater én gang

Kort plotter breddegrad og længdegrad, ikke adresser. At omsætte en adresse til koordinater kaldes geokodning, og de fleste udbydere tager betaling for det pr. anmodning. Det effektive mønster:

1. Når en opslag gemmes, geokodes dens adresse på serveren.
2. Gem breddegraden og længdegraden i databasen.
3. Kortet læser de gemte koordinater; det geokoder aldrig ved sidevisning.

Tjek hver udbyders vilkår for, hvor længe du må gemme geokodningsresultater; de er forskellige.

Eksempler på prompts

ET indlejret kort:

På kontaktsiden tilføj et indlejret Google-kort, der viser vores adresse (12 High Street, Leeds), ved brug af Maps Embed API med nøglen i GOOGLE_MAPS_EMBED_KEY. Tilføj et "Få vejvisning"-link under det. Gør det fuld bredde på telefoner, og lazy-load det.

ET interaktivt kort over opslag:

Tilføj breddegrad og længdegrad til listings-tabellen. Når et opslag oprettes, eller dets adresse ændres, geokodes det på serveren med nøglen i GEOCODING_API_KEY, og koordinaterne gemmes. På Browse-siden vises et kort med en markør pr. opslag ved brug af Leaflet, med klyngedannelse når markører overlapper. Et klik på en markør viser titel, pris og et link. Kortet og listen skal bruge de samme filtre.

"I nærheden":

Tilføj en knap "I nærheden", der spørger efter besøgendes placering og viser opslag inden for 10 km, sorteret efter afstand. Hvis de afviser adgang til placering, så lad dem skrive en by i stedet.

Trin for trin

1. Vælg kortTypen fra tabellen øverst.
2. Opret udbyderkontoen og et projekt, og aktivér kun de API'er, du har brug for.
3. Opret nøgler: en browser-nøgle begrænset til dine domæner (inklusive dit preview-domæne, mens du bygger) og, hvis nødvendigt, en server-nøgle til geokodning.
4. Gem nøgler som hemmeligheder og bed din app-bygger bruge dem; browser-nøglen er stadig begrænset, selvom den ender på siden.
5. Gem koordinater for hvert sted i din database.
6. Byg kortet: markører, pop-ups, klyngedannelse og en fornuftig standardzoom.
7. Par det med en liste. Et kort alene er svært at bruge på telefon og for skærmlæsere. Vis de samme resultater som en liste.
8. Sæt en budgetadvarsel i udbyderens konsol.
9. Publicér og test på det live domæne, da begrænsninger for referrer ofte blokerer kortet, indtil det live domæne er tilføjet.

Almindelige fejl

• Ubegrænsede nøgler. Hvem som helst kan genbruge dem på deres egen side.
• Geokodning ved hver sidevisning. Langsomt og dyrt; geokodér én gang ved gem.
• At glemme det live domæne i nøglebegrænsningerne. Virker i preview, tom grå boks i produktion.
• Kun-kort-layouts. Markører uden en liste er besværlige på små skærme og utilgængelige.
• Hundredvis af markører uden klyngedannelse. Ulæseligt og langsomt.
• Manglende kildeangivelse. De fleste kort- og tile-udbydere kræver den, og at skjule den bryder deres vilkår.
• At spørge om placering ved sideindlæsning. Spørg kun, når brugeren trykker på "I nærheden".

Tjekliste

• Den rigtige korttype er valgt til opgaven
• Browser-nøglen er begrænset til dine domæner og de nødvendige API'er
• Server-nøgler er gemt i hemmeligheder
• Koordinater er gemt i databasen og geokodet én gang
• Resultaterne vises også som en liste
• Klyngedannelse ved mange markører
• Kildeangivelse er synlig
• Budgetadvarsel sat hos udbyderen
• Testet på det publicerede domæne og på telefon

Tilføj kort med Mythex

Mythex har ingen indbygget kortintegration; du medbringer din egen udbydernøgle, tilføjer den som en projekthemmelighed (eller indsætter den, når agenten viser et hemmelighedskort), og beder om kortet i chatten, som beskrevet i Integrér enhver API. Koordinater gemmes i projektets database. Husk at tilføje både dit preview- og dit publicerede domæne til nøglens websitebegrænsninger, og publicér igen efter at have ændret hemmeligheder.

Kort ligger typisk ved siden af søgning og opslag: se sådan tilføjer du søgning til din app, sådan bygger du en fortegnelseshjemmeside og sådan bygger du en hjemmeside til en lille virksomhed.

Spørgsmål