Kā pievienot kartes savai lietotnei: iegulumi, interaktīvas kartes un veikalu meklētāji

Lai pievienotu karti savai lietotnei, vispirms izlem, vai vajag statisku iegulumu (viena vieta ar marķieri, piemēram, „atrodi mūsu veikalu”) vai interaktīvu karti (daudzi marķieri no taviem datiem, filtri, grupēšana, „tuvumā”). Vienai vietai iegultā karte ir visātrākā un ar Google Maps Embed API bez maksas. Interaktīvām kartēm izmanto JavaScript kartes bibliotēku — Google Maps JavaScript API, Mapbox GL JS vai atvērtā koda Leaflet ar kafeļu nodrošinātāju —, katras vietas platuma un garuma koordinātas glabā datubāzē un ierobežo savu API atslēgu uz savu domēnu. Informācija par piegādātājiem zemāk ir no katra piegādātāja pašu dokumentācijas uz 2026. gada septembri.

Kāda karte tev vajag?

Lielākajai daļai mazu uzņēmumu vietņu vajag tikai pirmo rindu. Katalogiem, tirgiem un sarakstu vietnēm vajag trešo un ceturto.

Tavas iespējas

Google Maps Platform

Google sākuma ceļvedis saka, ka jāizveido Cloud projekts ar iespējotu norēķinu kontu un jāiespējo API, ko vēlies. Tā maksas pēc lietojuma cenās ir Essentials SKU, ieskaitot Dynamic Maps, ar 10 000 bezmaksas notikumu mēneša limitu, un norāda Dynamic Maps 7,00 USD par 1000 notikumiem virs tā (pirmajā apjoma līmenī). Maps Embed SKU ir norādīts kā neierobežots un bez maksas. Google pārdod arī ikmēneša abonementa plānus. Aktuālos skaitļus skat. Google Maps Platform cenas.

Mapbox

Mapbox cenu lapā norādītas 50 000 bezmaksas ikmēneša kartes ielādes Mapbox GL JS tīmeklim, pēc tam 5,00 USD par 1000 ielādēm. Skat. Mapbox cenas.

Leaflet un OpenStreetMap

Leaflet sevi raksturo kā atvērtā koda JavaScript bibliotēku mobilajām ierīcēm draudzīgām interaktīvām kartēm, aptuveni 42 KB JavaScript. Tai vajag kartes kafeļus (kartes attēlus) no kaut kurienes. OpenStreetMap publiskie kafeļu serveri ir vilinoši, bet kafeļu lietošanas politika prasa redzamu norādi uz avotu, aizliedz masveida lejupielādi, nedod pakalpojuma garantiju un brīdina komerciālus pakalpojumus, ka piekļuve var tikt atsaukta. Reālam produktam izmanto komerciālu vai pašhostētu kafeļu avotu, kas darbojas ar Leaflet.

API atslēgas: publiskas, bet ierobežotas

Karšu atslēgas, ko izmanto pārlūkprogrammā, ir redzamas ikvienam, kas atver tavu lapu. Tas ir gaidāmi, bet nozīmē, ka kāds var nokopēt tavu atslēgu un palielināt lietojumu tavā rēķinā. Google drošības vadlīnijas iesaka pievienot vietnes (HTTP referrer) ierobežojumus, kas uzskaita tavus domēnus, un API ierobežojumus, lai atslēga darbotos tikai ar API, ko izmanto.

Atslēgām serveru pakalpojumiem — piemēram, tūkstošu adrešu ģeokodēšanai — jābūt atsevišķām atslēgām, kas glabājas servera noslēpumos, nevis lapā. Tāpat pakalpojumu konsolē iestati budžeta brīdinājumus vai kvotas, lai kļūda nevarētu kļūt par lielu rēķinu.

Ģeokodēšana: pārvērt adreses koordinātās vienreiz

Kartes attēlo platuma un garuma koordinātas, nevis adreses. Adreses pārvēršanu koordinātās sauc par ģeokodēšanu, un lielākā daļa nodrošinātāju to maksā par katru pieprasījumu. Efektīvs modelis:

1. Saglabājot sarakstu, ģeokodē tā adresi serverī.
2. Glabā platuma un garuma koordinātas datubāzē.
3. Karte lasa saglabātās koordinātas; tā nekad neģeokodē lapas skatījuma laikā.

Pārbaudi katra nodrošinātāja noteikumus par to, cik ilgi drīkst glabāt ģeokodēšanas rezultātus; tie atšķiras.

Uzvedņu piemēri

Viena iegulta karte:

Kontaktlapā pievieno iegultu Google karti, kas rāda mūsu adresi (12 High Street, Leeds), izmantojot Maps Embed API ar atslēgu GOOGLE_MAPS_EMBED_KEY. Zem tās pievieno saiti „Kā nokļūt”. Telefonā lai tā aizņem visu platumu, un ielādē to atliktā veidā.

Interaktīva sarakstu karte:

Pievieno listings tabulai platuma un garuma koordinātas. Kad sludinājums tiek izveidots vai mainās tā adrese, ģeokodē to serverī ar atslēgu GEOCODING_API_KEY un saglabā koordinātas. Lapā Browse rādi karti ar marķieri katram sludinājumam, izmantojot Leaflet, ar grupēšanu, kad marķieri pārklājas. Noklikšķinot uz marķiera, parādi nosaukumu, cenu un saiti. Karte un saraksts lai izmanto vienus un tos pašus filtrus.

„Tuvumā”:

Pievieno pogu „Tuvumā”, kas pieprasa apmeklētāja atrašanās vietu un parāda sludinājumus 10 km rādiusā, sakārtotus pēc attāluma. Ja viņš atsakās no atrašanās vietas piekļuves, ļauj ierakstīt pilsētu.

Soli pa solim

1. Izvēlies kartes veidu no tabulas augšā.
2. Izveido nodrošinātāja kontu un projektu un iespējo tikai nepieciešamos API.
3. Izveido atslēgas: pārlūkprogrammas atslēgu, kas ierobežota uz taviem domēniem (ieskaitot priekšskatījuma domēnu, kamēr veido), un, ja vajag, serveru atslēgu ģeokodēšanai.
4. Glabā atslēgas kā noslēpumus un lūdz savam veidotājam tās izmantot; pārlūkprogrammas atslēga joprojām ir ierobežota, lai gan tā nonāk lapā.
5. Glabā koordinātas katrai vietai datubāzē.
6. Izveido karti: marķieri, uznirstošie logi, grupēšana un saprātīgs noklusējuma tuvinājums.
7. Savienojiet to ar sarakstu. Karte viena pati ir grūti lietojama telefonā un ekrāna lasītājiem. Parādi tos pašus rezultātus kā sarakstu.
8. Iestati budžeta brīdinājumu nodrošinātāja konsolē.
9. Publicē un pārbaudi dzīvajā domēnā, jo adreses ierobežojumi bieži bloķē karti, kamēr dzīvais domēns nav pievienots.

Biežākās kļūdas

• Neierobežotas atslēgas. Ikviens var tās izmantot savā vietnē.
• Ģeokodēšana katrā lapas skatījumā. Lēni un dārgi; ģeokodē vienreiz saglabājot.
• Aizmirsts dzīvais domēns atslēgas ierobežojumos. Darbojas priekšskatījumā, produkcijā tukšs pelēks lodziņš.
• Tikai kartes izkārtojumi. Marķieri bez saraksta ir grūti lietojami mazos ekrānos un nepieejami.
• Simtiem marķieru bez grupēšanas. Nelasāmi un lēni.
• Trūkstoša norāde uz avotu. Vairums karšu un kafeļu nodrošinātāju to prasa, un tās paslēpšana pārkāpj viņu noteikumus.
• Atrašanās vietas pieprasīšana lapas ielādes brīdī. Jautā tikai tad, kad lietotājs pieskaras „Tuvumā”.

Kontrolsaraksts

• Pareizs kartes veids izvēlēts uzdevumam
• Pārlūkprogrammas atslēga ierobežota uz taviem domēniem un vajadzīgajiem API
• Serveru atslēgas glabātas noslēpumos
• Koordinātas saglabātas datubāzē, ģeokodētas vienreiz
• Rezultāti rādīti arī kā saraksts
• Grupēšana daudziem marķieriem
• Norāde uz avotu redzama
• Budžeta brīdinājums iestatīts pie nodrošinātāja
• Pārbaudīts publicētajā domēnā un telefonā

Karšu pievienošana ar Mythex

Mythex nav iebūvētas karšu integrācijas; ienes savu nodrošinātāja atslēgu, pievieno to kā projekta noslēpumu (vai ielīmē, kad aģents parāda noslēpumu kartīti) un pieprasi karti tērzēšanā, kā aprakstīts Integrēt jebkuru API. Koordinātas ieliec projekta datubāzē. Atceries pievienot gan priekšskatījuma, gan publicēto domēnu atslēgas vietnes ierobežojumiem un pēc noslēpumu maiņas publicē vēlreiz.

Kartes parasti atrodas blakus meklēšanai un sarakstiem: skat. kā pievienot meklēšanu savai lietotnei, kā izveidot kataloga vietni un kā izveidot mazā uzņēmuma vietni.

Jautājumi