Karttojen lisääminen sovellukseesi: upotukset, interaktiiviset kartat ja myymäläkartat

Kartan lisääminen sovellukseesi alkaa siitä, että päätät, tarvitsetko staattisen upotuksen (yksi sijainti neulalla, kuten ”löydä myymälämme”) vai interaktiivisen kartan (monta neulaa datastasi, suodattimet, ryhmittely, ”lähellä minua”). Yhden sijainnin kohdalla upotettu kartta on nopein ja Googlen Maps Embed API:lla ilmainen. Interaktiivisiin karttoihin käytä JavaScript-karttakirjastoa — Google Maps JavaScript API:a, Mapbox GL JS:ää tai avoimen lähdekoodin Leafletia laattapalveluntarjoajan kanssa — tallenna jokaisen paikan leveys- ja pituusaste tietokantaan ja rajaa API-avaimesi omaan domainiisi. Toimittajien tiedot alla ovat heidän omista dokumentaatioistaan syyskuun 2026 tilanteen mukaan.

Minkälainen kartta tarvitaan?

Useimmat pienten yritysten sivustot tarvitsevat vain ensimmäisen rivin. Hakemistot, markkinapaikat ja ilmoitussivustot tarvitsevat kolmannen ja neljännen.

Vaihtoehtosi

Google Maps Platform

Google Maps Platformin aloitusohjeen mukaan sinun pitää luoda laskutus käyttöön otettu Cloud-projekti ja ottaa käyttöön haluamasi API:t. Sen maksa-kun-käytät -hinnoittelu antaa Essentials-SKU:ille, mukaan lukien Dynamic Maps, 10 000 tapahtuman ilmaisen kuukausikiintiön, ja listaa Dynamic Mapsin hinnaksi 7,00 dollaria tuhatta tapahtumaa kohden tuon rajan yli (ensimmäisellä volyymitasolla). Maps Embed -SKU on listattu rajoittamattomaksi ja maksuttomaksi. Google myy myös kuukausitilauspaketteja. Katso nykyiset luvut Google Maps Platformin hinnoittelusta.

Mapbox

Mapboxin hinnoittelusivu listaa Mapbox GL JS:lle verkossa 50 000 ilmaista kuukausittaista kartan latausta, sen jälkeen 5,00 dollaria tuhatta latausta kohden. Katso Mapboxin hinnoittelu.

Leaflet ja OpenStreetMap

Leaflet kuvaa itsensä avoimen lähdekoodin JavaScript-kirjastoksi mobiiliystävällisiin interaktiivisiin karttoihin, noin 42 KB JavaScriptiä. Se tarvitsee karttalaatat (kartan kuvat) jostain. OpenStreetMapin julkiset laattapalvelimet houkuttelevat, mutta laattojen käyttöehdot vaativat näkyvän lähdeviittauksen, kieltävät massalataamisen, eivät anna palvelutakuuta ja varoittavat, että pääsy kaupallisille palveluille voidaan poistaa. Oikeaan tuotteeseen käytä kaupallista tai itse ylläpidettyä laattalähdettä, joka toimii Leafletin kanssa.

API-avaimet: julkisia, mutta rajattuja

Selaimessa käytettävät karttaavaimet näkyvät jokaiselle, joka avaa sivusi. Tämä on odotettua, mutta se tarkoittaa, että joku voi kopioida avaimesi ja kasvattaa käyttöä laskussasi. Googlen turvallisuusohjeiden mukaan lisää verkkosivuston (HTTP-viitteen) rajoitukset, joissa luetellaan domainisi, ja API-rajoitukset, joiden mukaan avain toimii vain käyttämillesi API:lle.

Palvelinpuolen palveluiden avaimet — esimerkiksi tuhansien osoitteiden geokoodaukseen — kannattaa pitää erillään palvelinpuolen salaisuuksissa, ei sivulla. Aseta myös palveluntarjoajan konsolissa budjettihälytykset tai kiintiöt, jotta virhe ei muutu suureksi laskuksi.

Geokoodaus: muunna osoitteet koordinaateiksi kerran

Kartat piirtävät leveys- ja pituusasteita, eivät osoitteita. Osoitteen muuntamista koordinaateiksi kutsutaan geokoodaukseksi, ja useimmat palveluntarjoajat veloittavat siitä pyyntökohtaisesti. Tehokas tapa:

1. Kun ilmoitus tallennetaan, geokoodaa sen osoite palvelimella.
2. Tallenna leveys- ja pituusaste tietokantaan.
3. Kartta lukee tallennetut koordinaatit; se ei koskaan geokoodaa sivunäytössä.

Tarkista kunkin palveluntarjoajan ehdot siitä, kuinka kauan saat tallentaa geokoodauksen tuloksia; ne eroavat toisistaan.

Esimerkkikehotteita

Yksi upotettu kartta:

Lisää Yhteystiedot-sivulle upotettu Google-kartta, joka näyttää osoitteemme (12 High Street, Leeds) Maps Embed API:lla, avain GOOGLE_MAPS_EMBED_KEY-muuttujassa. Lisää sen alle linkki ”Hae ohjeet”. Tee siitä täysleveä puhelimilla ja lataa se laiskasti.

Listausten interaktiivinen kartta:

Lisää leveys- ja pituusaste listings-tauluun. Kun ilmoitus luodaan tai sen osoite muuttuu, geokoodaa se palvelimella avaimella GEOCODING_API_KEY ja tallenna koordinaatit. Selaa-sivulla näytä kartta, jossa on merkki jokaiselle ilmoitukselle Leafletilla, ryhmittele merkit, kun ne menevät päällekkäin. Merkin klikkaaminen näyttää otsikon, hinnan ja linkin. Kartan ja listan pitää käyttää samoja suodattimia.

”Lähellä minua”:

Lisää ”Lähellä minua” -painike, joka pyytää kävijän sijaintia ja näyttää ilmoitukset 10 km:n säteellä järjestettynä etäisyyden mukaan. Jos kävijä kieltäytyy sijaintioikeudesta, anna hänen kirjoittaa kaupunki.

Vaihe vaiheelta

1. Valitse karttatyyppi yllä olevasta taulukosta.
2. Luo palveluntarjoajan tili ja projekti, ja ota käyttöön vain tarvitsemasi API:t.
3. Luo avaimet: selainavain, joka on rajattu domaineihisi (mukaan lukien esikatselu-domain rakentamisen ajaksi), ja tarvittaessa palvelinavain geokoodaukseen.
4. Tallenna avaimet salaisuuksina ja pyydä sovelluskehittäjääsi käyttämään niitä; selainavain on silti rajattu, vaikka se päätyy sivulle.
5. Tallenna koordinaatit jokaiselle paikalle tietokantaasi.
6. Rakenna kartta: merkit, ponnahdusikkunat, ryhmittely ja järkevä oletuszoom.
7. Yhdistä se listaan. Pelkkä kartta on vaikea käyttää puhelimella ja ruudunlukijoille. Näytä samat tulokset listana.
8. Aseta budjettihälytys palveluntarjoajan konsoliin.
9. Julkaise ja testaa live-domainilla, koska viitteen rajoitukset estävät usein kartan, kunnes live-domain lisätään.

Yleisimmät virheet

• Rajoittamattomat avaimet. Kuka tahansa voi käyttää niitä omalla sivustollaan.
• Geokoodaus joka sivunäytöllä. Hidasta ja kallista; geokoodaa kerran tallennuksessa.
• Live-domainin unohtaminen avainrajoituksista. Toimii esikatselussa, mutta tuotannossa tyhjä harmaa laatikko.
• Pelkät karttapohjaiset asettelut. Neulat ilman listaa ovat tuskallisia pienillä näytöillä ja saavuttamattomia.
• Sadat merkit ilman ryhmittelyä. Lukukelvoton ja hidas.
• Lähdeviittauksen puuttuminen. Useimmat kartta- ja laattapalveluntarjoajat vaativat sen, ja sen piilottaminen rikkoo heidän ehtojaan.
• Sijainnin pyytäminen sivun latautuessa. Pyydä vain, kun käyttäjä napauttaa ”Lähellä minua”.

Tarkistuslista

• Oikea karttatyyppi valittu tehtävään
• Selainavain rajattu domaineihisi ja tarvittaviin API:hin
• Palvelinpuolen avaimet pidetty salaisuuksissa
• Koordinaatit tallennettu tietokantaan, geokoodattu kerran
• Tulokset näytetään myös listana
• Ryhmittely, kun merkkejä on paljon
• Lähdeviittaus näkyvissä
• Budjettihälytys asetettu palveluntarjoajalle
• Testattu julkaistulla domainilla ja puhelimella

Karttojen lisääminen Mythexillä

Mythexissä ei ole sisäänrakennettua karttaintegraatiota; tuot oman palveluntarjoajan avaimen, lisäät sen projektin salaisuutena (tai liität sen, kun agentti näyttää salaisuuskortin) ja pyydät karttaa chatissa, kuten kohdassa Integroi mikä tahansa API kuvataan. Koordinaatit menevät projektin tietokantaan. Muista lisätä sekä esikatselu- että julkaistu domain avaimen verkkosivuston rajoituksiin, ja julkaise uudelleen salaisuuksien muuttamisen jälkeen.

Kartat istuvat yleensä haun ja listausten viereen: katso miten lisätä haku sovellukseesi, miten rakentaa hakemistosivusto ja miten rakentaa pienen yrityksen verkkosivusto.

Kysymykset