Kuidas lisada oma rakendusse kaardid: manustatud kaardid, interaktiivsed kaardid ja poodide otsing
Kaardi lisamiseks rakendusse otsusta esmalt, kas vajad staatilist manust (üks asukoht märgiga, nagu „leia meie pood“) või interaktiivset kaarti (palju märke sinu andmetest, filtrid, rühmitamine, „minu lähedal“). Ühe asukoha puhul on manustatud kaart kõige kiirem ja Google'i Maps Embed API-ga tasuta. Interaktiivsete kaartide jaoks kasuta JavaScripti kaarditeeki — Google Maps JavaScript API-d, Mapbox GL JS-i või avatud lähtekoodiga Leafletit koos plaaditeenuse pakkujaga —, salvesta iga koha laiuskraad ja pikkuskraad oma andmebaasi ning piira oma API-võti oma domeenile. Pakkujate andmed allpool on pärit iga pakkuja enda dokumentatsioonist seisuga september 2026.
Millist kaarti vajad?
| Vajadus | Näide | Lihtsaim lähenemine |
|---|---|---|
| Üks asukoht | Kohvikute kontaktilehekülg | Manustatud kaart |
| Mõned kindlad asukohad | Kolm filiaali | Manus iga filiaali kohta või väike interaktiivne kaart |
| Palju asukohti sinu andmetest | Kataloog, kinnisvaraloendid, üritused | Interaktiivne kaart märkidega sinu andmebaasist |
| Otsing kauguse järgi | „Kliinikud 10 km raadiuses“ | Salvestatud koordinaadid ja kauguspäring |
| Marsruudid või juhised | Tarnetsoonid, „Tee juhised“ | Juhiste link või marsruutimise API |
Enamiku väikeste äriveebide puhul vajad ainult esimest rida. Kataloogid, turud ja loendilehed vajavad kolmandat ja neljandat rida.
Sinu valikud
| Valik | Mis see on | Kulud (seisuga september 2026) | Sobib |
|---|---|---|---|
| Google Maps Embed API | Iframe, mis näitab kohta või otsingut | Google'i dokumentatsioon: kõik päringud on tasuta piiramatu kasutusega; API-võti on vajalik | Üks asukoht lehel |
| Google Maps JavaScript API | Täielikult interaktiivne Google'i kaart | Dynamic Maps: 10 000 tasuta sündmust kuus, seejärel tasu iga 1000 eest | Tuttav välimus, Google'i kohaandmed |
| Mapbox GL JS | Interaktiivsed vektorkaardid kohandatud stiilidega | Mapbox loetleb 50 000 tasuta veebikaardi laadimist kuus, seejärel 5,00 $ iga 1000 eest | Kohandatud stiiliga kaardid |
| Leaflet + plaadid | Avatud lähtekoodiga kaarditeek; plaatide allika valid ise | Leaflet ise on tasuta; plaadid sõltuvad pakkujast | Kerged kaardid, sõltuvuse vältimine |
Google Maps Platform
Google'i alustamisjuhend ütleb, et pead looma arveldust lubava Cloud projekti ja lubama API-d, mida soovid. Maksa-kasutamise hinnastuses on Essentials SKU-del, sh Dynamic Maps, 10 000 sündmuse tasuta kuumäär, ning Dynamic Maps on loetletud hinnaga 7,00 $ iga 1000 sündmuse eest üle selle (esimesel mahutasemel). Maps Embed SKU on loetletud kui piiramatu ja tasuta. Google müüb ka kuutellimuse pakette. Praeguste numbrite jaoks vaata Google Maps Platformi hindu.
Mapbox
Mapboxi hinnalehel on loetletud Mapbox GL JS-i jaoks 50 000 tasuta kuukaardi laadimist veebis, seejärel 5,00 $ iga 1000 laadimise eest. Vt Mapboxi hindu.
Leaflet ja OpenStreetMap
Leaflet kirjeldab end kui avatud lähtekoodiga JavaScripti teeki mobiilisõbralike interaktiivsete kaartide jaoks, umbes 42 KB JavaScripti. See vajab kaardiplaate (kaardi pilte) kusagilt. OpenStreetMapi avalikud plaadiserverid on ahvatlevad, kuid plaatide kasutuspoliitika nõuab nähtavat viitamist, keelab massilise allalaadimise, ei paku teenusegarantiid ning hoiatab kaubanduslikke teenuseid, et juurdepääs võidakse ära võtta. Päris toote jaoks kasuta kaubanduslikku või isehostitud plaaditeenust, mis sobib Leafletiga.
API-võtmed: avalikud, kuid piiratud
Brauseris kasutatavad kaardivõtmed on nähtavad igaühele, kes sinu lehe avab. See on ootuspärane, kuid tähendab, et keegi võib võtme kopeerida ja sinu arvet kasvatada. Google'i turvajuhend soovitab lisada veebisaidi (HTTP referrer) piirangud, mis loetlevad su domeenid, ja API piirangud, et võti töötaks ainult kasutatavate API-de jaoks.
Serveripoolsete teenuste võtmed — näiteks tuhandete aadresside geokodeerimine — peaksid olema eraldi võtmed, mis hoitakse serveri saladustes, mitte lehel. Seadista ka eelarve hoiatused või kvoodid pakkuja konsoolis, et viga ei muutuks suureks arveks.
Geokodeerimine: teisenda aadressid koordinaatideks üks kord
Kaardid joonistavad laiuskraadi ja pikkuskraadi, mitte aadresse. Aadressi teisendamist koordinaatideks nimetatakse geokodeerimiseks, ja enamik pakkujaid maksab selle eest päringu kaupa. Tõhus muster:
- Kui kirje salvestatakse, geokodeeri selle aadress serveris.
- Salvesta laiuskraad ja pikkuskraad andmebaasi.
- Kaart loeb salvestatud koordinaate; see ei geokodeeri lehe vaatamise ajal.
Kontrolli iga pakkuja tingimusi selle kohta, kui kaua tohib geokodeerimise tulemusi salvestada; need erinevad.
Näidispromptid
Üks manustatud kaart:
Lisa kontaktilehele manustatud Google'i kaart, mis näitab meie aadressi (12 High Street, Leeds), kasutades Maps Embed API-t, võti on GOOGLE_MAPS_EMBED_KEY. Lisa selle alla link „Vaata juhiseid“. Mobiilis täislaiune ning lae laisalt.
Loendite interaktiivne kaart:
Lisa listings tabelisse laiuskraad ja pikkuskraad. Kui kirje luuakse või selle aadress muutub, geokodeeri see serveris võtmega GEOCODING_API_KEY ja salvesta koordinaadid. Browse-lehel näita kaarti, kus on märk iga kirje kohta, kasutades Leafletit, rühmitamisega, kui märgid kattuvad. Märgil klõpsamine näitab pealkirja, hinda ja linki. Kaardil ja loendil peaksid olema samad filtrid.
„Minu lähedal“:
Lisa nupp „Minu lähedal“, mis küsib külastaja asukohta ja näitab 10 km raadiuses olevaid kirjeid, sorteeritult kauguse järgi. Kui külastaja asukohaloa keeldub, lase tal sisestada linn.
Samm-sammult
- Vali kaardi tüüp ülaosa tabelist.
- Loo pakkuja konto ja projekt ning luba ainult vajalikud API-d.
- Loo võtmed: brauseri võti, mis on piiratud sinu domeenidele (sh eelvaate domeen ehituse ajal), ja vajadusel serveri võti geokodeerimiseks.
- Salvesta võtmed saladustena ning palu oma ehitajal neid kasutada; brauseri võti on endiselt piiratud, kuigi see jõuab lehele.
- Salvesta koordinaadid iga koha kohta andmebaasi.
- Ehita kaart: märgid, hüpikaknad, rühmitamine ja mõistlik vaikimisi suurendus.
- Kombineeri see loendiga. Ainult kaart on telefonis ja ekraanilugejatele raske kasutada. Näita samu tulemusi loendina.
- Sea eelarve hoiatus pakkuja konsoolis.
- Avalda ja testi avalikul domeenil, sest võtme piirangud blokeerivad kaardi sageli seni, kuni elav domeen on lisatud.
Levinud vead
- Piiramata võtmed. Igaüks saab neid oma saidil uuesti kasutada.
- Geokodeerimine iga lehe vaatamise ajal. Aeglane ja kallis; geokodeeri üks kord salvestamisel.
- Elava domeeni unustamine võtme piirangutes. Töötab eelvaates, tootmises tühi hall kast.
- Ainult kaardi paigutused. Märgid ilma loendita on väikestel ekraanidel valusad ja ligipääsmatud.
- Sadu märke ilma rühmitamiseta. Loetamatu ja aeglane.
- Puuduv viitamine. Enamik kaardi- ja plaaditeenuse pakkujaid nõuab seda, ning selle peitmine rikub nende tingimusi.
- Asukoha küsimine lehe laadimisel. Küsi ainult siis, kui kasutaja klõpsab „Minu lähedal“.
Kontrollnimekiri
- Töö jaoks valitud õige kaardi tüüp
- Brauseri võti on piiratud sinu domeenidele ja vajalikele API-dele
- Serveripoolsed võtmed on saladustes
- Koordinaadid on andmebaasis, geokodeeritud üks kord
- Tulemusi näidatakse ka loendina
- Rühmitamine paljude märkide jaoks
- Viitamine on nähtav
- Eelarve hoiatus on pakkujaga seatud
- Testitud avaldatud domeenil ja telefonis
Kaartide lisamine Mythexiga
Mythexil ei ole sisseehitatud kaardiintegratsiooni; sa toote oma pakkuja võtme, lisad selle projekti saladusena (või kleebid selle, kui agent kuvab saladuste kaardi) ning küsid kaarti vestluses, nagu kirjeldatud juhendis Integreeri mis tahes API. Koordinaadid lähevad projekti andmebaasi. Pea meeles lisada nii oma eelvaate kui ka avaldatud domeeni võtme veebisaidi piirangutesse ning avalda pärast saladuste muutmist uuesti.
Kaardid asuvad tavaliselt otsingu ja loendite kõrval: vt kuidas lisada rakendusse otsing, kuidas ehitada kataloogi veebisaiti ja kuidas ehitada väikeettevõtte veebisaiti.
Küsimused
Mis on lihtsaim viis veebilehele kaardi lisamiseks?
Manusta üks kaart koos märgiga, näiteks Google'i Maps Embed API abil iframe'is. Google'i dokumentatsiooni järgi on Maps Embedi päringud tasuta ja kasutus piiramatu, kuid API-võti on siiski vajalik.
Kas Google Maps on rakenduses tasuta kasutatav?
Osaliselt. Seisuga september 2026 annab Google'i maksa-kasutamise hinnastus iga Essentials SKU-le, sh Dynamic Maps, 10 000 tasuta sündmust kuus, ning Maps Embed on piiramatu ja tasuta. Alustamiseks vajad siiski arveldust lubavat Google Cloud projekti.
Kas Google Mapsi API-võti on turvaline panna brauserisse?
Brauseri kaartide võtmed on kõigile nähtavad, seega soovitab Google need piirata sinu veebilehe aadressidele ja ainult kasutatavatele API-dele. Serveripoolsete teenuste, nagu geokodeerimine, võtmed peaksid jääma serverisse.
Kas OpenStreetMap on tasuta kasutada?
OpenStreetMapi andmed on tasuta kasutatavad koos viitamisega, kuid selle avalikud plaadiserverid on annetustest rahastatud ilma teenusegarantiita ning poliitika hoiatab kaubanduslikke kasutajaid, et juurdepääs võidakse ära võtta. Tootmisrakenduse jaoks kasuta plaaditeenuse pakkujat või hosti ise.