Kako dodati karte u svoju aplikaciju: ugradnje, interaktivne karte i lokatori trgovina

Da biste dodali kartu aplikaciji, prvo odlučite treba li vam statična ugradnja (jedna lokacija s oznakom, poput „pronađite našu trgovinu“) ili interaktivna karta (mnogo oznaka iz vaših podataka, filtri, grupiranje, „u blizini“). Za jednu lokaciju ugrađena karta je najbrža i, uz Googleov Maps Embed API, besplatna. Za interaktivne karte koristite biblioteku za karte u JavaScriptu (Google Maps JavaScript API, Mapbox GL JS ili otvorenu biblioteku Leaflet s pružateljem pločica), u bazi podataka spremite zemljopisnu širinu i dužinu svakog mjesta i ograničite API ključ na vašu domenu. Podaci o dobavljačima u nastavku dolaze iz njihove vlastite dokumentacije od rujna 2026.

Kakva karta vam treba?

Većina malih poslovnih stranica treba samo prvi redak. Imenici, tržišta i stranice s popisima trebaju treći i četvrti.

Vaše opcije

Google Maps Platform

Googleov vodič za početak kaže da morate stvoriti Cloud projekt s omogućenom naplatom i omogućiti API-je koje želite. Njihovo plaćanje po korištenju daje Essentials SKU-ove, uključujući Dynamic Maps, s mjesečnim besplatnim limitom od 10.000 događaja, i navodi Dynamic Maps po cijeni od 7,00 $ po 1.000 događaja iznad toga (na prvom razredu količine). SKU Maps Embed naveden je kao neograničen i besplatan. Google također prodaje mjesečne pretplatne pakete. Aktualne brojke provjerite na Google Maps Platform cijenama.

Mapbox

Mapboxova stranica s cijenama navodi 50.000 besplatnih mjesečnih učitavanja karte za Mapbox GL JS na webu, zatim 5,00 $ po 1.000 učitavanja. Pogledajte Mapbox cijene.

Leaflet i OpenStreetMap

Leaflet opisuje sebe kao biblioteku JavaScripta otvorenog koda za interaktivne karte prilagođene mobilnim uređajima, veličine oko 42 KB JavaScripta. Treba mu pločice karte (slike karte) negdje s kojeg se uzimaju. Javni poslužitelji pločica OpenStreetMapa primamljivi su, ali pravila o korištenju pločica traže vidljivo navođenje izvora, zabranjuju masovno preuzimanje, ne nude jamstvo usluge i upozoravaju da se pristup komercijalnim uslugama može ukinuti. Za pravi proizvod koristite komercijalni ili samostalno hostirani izvor pločica koji radi s Leafletom.

API ključevi: javni, ali ograničeni

Ključevi za karte korišteni u pregledniku vidljivi su svakome tko otvori vašu stranicu. To je očekivano, ali znači da netko može kopirati vaš ključ i potrošiti vašu kvotu na vaš račun. Googleove sigurnosne smjernice su dodati ograničenja po web-adresi (HTTP referrer) s popisom vaših domena i ograničenja API-ja tako da ključ radi samo za API-je koje koristite.

Ključevi za usluge na poslužitelju, na primjer geokodiranje tisuća adresa, trebaju biti zasebni ključevi pohranjeni u tajnim vrijednostima na poslužitelju, a ne na stranici. Također postavite upozorenja o proračunu ili kvote u konzoli pružatelja da greška ne postane veliki račun.

Geokodiranje: pretvorite adrese u koordinate jednom

Karte iscrtavaju zemljopisnu širinu i dužinu, a ne adrese. Pretvaranje adrese u koordinate zove se geokodiranje, a većina pružatelja naplaćuje ga po zahtjevu. Učinkovit obrazac:

1. Kada se oglas spremi, geokodirajte njegovu adresu na poslužitelju.
2. Spremite zemljopisnu širinu i dužinu u bazu podataka.
3. Karta čita spremljene koordinate; nikada ne geokodira pri prikazu stranice.

Provjerite uvjete svakog pružatelja o tome koliko dugo smijete pohranjivati rezultate geokodiranja; razlikuju se.

Primjeri promptova

Jedna ugrađena karta:

Na stranici Kontakt dodaj ugrađenu Google kartu koja prikazuje našu adresu (12 High Street, Leeds) pomoću Maps Embed API-ja, s ključem u GOOGLE_MAPS_EMBED_KEY. Ispod dodaj poveznicu „Upute“. Na telefonima neka bude pune širine i učitavaj je lijeno (lazy-load).

Interaktivna karta oglasa:

Dodaj zemljopisnu širinu i dužinu u tablicu oglasa. Kada se oglas stvori ili se njegova adresa promijeni, geokodiraj je na poslužitelju pomoću ključa u GEOCODING_API_KEY i spremi koordinate. Na stranici Pregled prikaži kartu s oznakom za svaki oglas pomoću Leafleta, s grupiranjem kada se oznake preklapaju. Klik na oznaku prikazuje naslov, cijenu i poveznicu. Karta i popis trebaju koristiti iste filtre.

„U blizini“:

Dodaj gumb „U blizini“ koji traži lokaciju posjetitelja i prikazuje oglase unutar 10 km, sortirane po udaljenosti. Ako odbije pristup lokaciji, neka može upisati grad.

Korak po korak

1. Odaberite vrstu karte iz tablice na vrhu.
2. Stvorite račun pružatelja i projekt te omogućite samo API-je koje trebate.
3. Stvorite ključeve: ključ za preglednik ograničen na vaše domene (uključujući domenu pregleda dok gradite) i, ako treba, ključ za poslužitelj za geokodiranje.
4. Spremite ključeve kao tajne vrijednosti i zamolite graditelja da ih koristi; ključ za preglednik i dalje je ograničen iako završi na stranici.
5. Spremite koordinate za svako mjesto u bazi podataka.
6. Izgradite kartu: oznake, skočne prozore, grupiranje i razuman zadani zoom.
7. Uparite je s popisom. Sama karta teško se koristi na telefonu i za čitače zaslona. Prikažite iste rezultate kao popis.
8. Postavite upozorenje o proračunu u konzoli pružatelja.
9. Objavite i testirajte na živoj domeni, jer ograničenja po referreru često blokiraju kartu dok ne dodate živu domenu.

Česte greške

• Neograničeni ključevi. Svatko ih može ponovno upotrijebiti na svojoj stranici.
• Geokodiranje pri svakom prikazu stranice. Sporo i skupo; geokodirajte jednom pri spremanju.
• Zaboravljena živa domena u ograničenjima ključa. Radi u pregledu, prazan sivi okvir u produkciji.
• Rasporedi samo s kartom. Oznake bez popisa su neugodne na malim ekranima i nedostupne za čitače zaslona.
• Stotine oznaka bez grupiranja. Nečitljivo i sporo.
• Nedostaje navođenje izvora. Većina pružatelja karata i pločica to traži, a skrivanje krši njihove uvjete.
• Traženje lokacije pri učitavanju stranice. Tražite je tek kada korisnik dodirne „U blizini“.

Kontrolni popis

• Odabrana ispravna vrsta karte za zadatak
• Ključ za preglednik ograničen na vaše domene i potrebne API-je
• Ključevi na poslužitelju čuvaju se u tajnim vrijednostima
• Koordinate spremljene u bazi podataka, geokodirane jednom
• Rezultati prikazani i kao popis
• Grupiranje za mnogo oznaka
• Navođenje izvora vidljivo
• Upozorenje o proračunu postavljeno kod pružatelja
• Testirano na objavljenoj domeni i na telefonu

Dodavanje karata u Mythexu

Mythex nema ugrađenu integraciju karata; donosite vlastiti ključ pružatelja, dodajete ga kao tajnu vrijednost projekta (ili ga zalijepite kada agent prikaže karticu s tajnama) i tražite kartu u chatu, kako je opisano u Integriraj bilo koji API. Koordinate idu u bazu podataka projekta. Ne zaboravite dodati i domenu pregleda i objavljenu domenu u ograničenja web-adrese ključa i objavite ponovno nakon promjena tajni.

Karte obično idu uz pretragu i oglase: pogledajte kako dodati pretragu u aplikaciju, kako izraditi web-stranicu imenika i kako izraditi web-stranicu male tvrtke.

Pitanja