Kako dodati mape u vašu aplikaciju: ugrađene mape, interaktivne karte i pretraga lokacija
Da biste dodali mapu u aplikaciju, prvo odlučite da li vam treba statički ugrađeni prikaz (jedna lokacija s oznakom, kao "pronađite našu radnju") ili interaktivna mapa (mnogo oznaka iz vaših podataka, filteri, grupisanje, "u blizini"). Za jednu lokaciju, ugrađena mapa je najbrža i, s Google Maps Embed API-jem, besplatna. Za interaktivne mape, koristite biblioteku za mape u JavaScriptu (Google Maps JavaScript API, Mapbox GL JS ili open-source Leaflet s dobavljačem tile-ova), čuvajte geografsku širinu i dužinu svakog mjesta u bazi podataka i ograničite API ključ na vlastiti domen. Podaci o dobavljačima ispod su iz njihove sopstvene dokumentacije od septembra 2026.
Kakva mapa vam treba?
| Potreba | Primjer | Najjednostavniji pristup |
|---|---|---|
| Jedna lokacija | Kontakt stranica za kafić | Ugrađena mapa |
| Nekoliko fiksnih lokacija | Tri poslovnice | Ugradnja po poslovnici ili mala interaktivna mapa |
| Mnogo lokacija iz vaših podataka | Imenik, oglasi nekretnina, događaji | Interaktivna mapa s oznakama iz vaše baze |
| Pretraga po udaljenosti | "Klinike u krugu od 10 km" | Sačuvane koordinate plus upit po udaljenosti |
| Rute ili uputstva | Zone dostave, "uputstva za dolazak" | Link za uputstva ili API za rutiranje |
Većina sajtova malih firmi treba samo prvi red. Imenici, tržišta i sajtovi s oglasima trebaju treći i četvrti.
Vaše opcije
| Opcija | Šta je to | Napomene o cijeni (od septembra 2026) | Dobro za |
|---|---|---|---|
| Google Maps Embed API | iframe koji prikazuje mjesto ili pretragu | Google-ova dokumentacija: svi zahtjevi su besplatni bez limita korištenja; potreban API ključ | Jednu lokaciju na stranici |
| Google Maps JavaScript API | Potpuno interaktivna Google mapa | Dynamic Maps: 10.000 besplatnih događaja mjesečno, zatim plaćanje po 1.000 | Poznat izgled, Googlovi podaci o mjestima |
| Mapbox GL JS | Interaktivne vektorske mape s prilagođenim stilovima | Mapbox navodi 50.000 besplatnih učitavanja mape na webu mjesečno, zatim 5,00 $ po 1.000 | Mape s prilagođenim stilom |
| Leaflet + tile-ovi | Biblioteka za mape otvorenog koda; sami birate izvor tile-ova | Sam Leaflet je besplatan; tile-ovi zavise od dobavljača | Lagane mape, izbjegavanje vezivanja za dobavljača |
Google Maps Platform
Google-ov vodič za početak kaže da morate napraviti Cloud projekat s uključenom naplatom i omogućiti API-je koje želite. Njegove cijene po korištenju daju Essentials SKU-ove, uključujući Dynamic Maps, mjesečni besplatni limit od 10.000 događaja, a Dynamic Maps navodi po 7,00 $ za 1.000 događaja iznad toga (na prvom nivou količine). Maps Embed SKU je naveden kao neograničen i besplatan. Google takođe prodaje mjesečne pretplatničke planove. Aktuelne brojeve provjerite na cijenama Google Maps Platform.
Mapbox
Stranica s cijenama Mapboxa navodi 50.000 besplatnih mjesečnih učitavanja mape za Mapbox GL JS na webu, zatim 5,00 $ po 1.000 učitavanja. Pogledajte cijene Mapboxa.
Leaflet i OpenStreetMap
Leaflet sebe opisuje kao open-source JavaScript biblioteku za interaktivne mape prilagođene mobilnim uređajima, s oko 42 KB JavaScripta. Potrebni su mu tile-ovi (slike mape) negdje odakle se učitavaju. Javni tile serveri OpenStreetMap-a su privlačni, ali pravila za korištenje tile-ova traže vidljivo navođenje izvora, zabranjuju masovno preuzimanje, ne nude garanciju usluge i upozoravaju da komercijalne usluge mogu izgubiti pristup. Za pravi proizvod koristite komercijalni ili samostalno hostovan izvor tile-ova koji radi s Leafletom.
API ključevi: javni, ali ograničeni
Ključevi za mape koji se koriste u pregledniku vidljivi su svakome ko otvori vašu stranicu. To je očekivano, ali znači da neko može kopirati vaš ključ i podići potrošnju na vaš račun. Googlova sigurnosna preporuka je da dodate ograničenja po web stranici (HTTP referrer) s navedenim domenima i ograničenja API-ja tako da ključ radi samo za API-je koje koristite.
Ključevi za servise na serveru, na primjer za geokodiranje hiljada adresa, treba da budu odvojeni ključevi sačuvani kao tajne na serveru, a ne na stranici. Takođe postavite upozorenja o budžetu ili kvote u konzoli dobavljača, da greška ne postane veliki račun.
Geokodiranje: pretvorite adrese u koordinate jednom
Mape prikazuju geografsku širinu i dužinu, a ne adrese. Pretvaranje adrese u koordinate zove se geokodiranje, a većina dobavljača naplaćuje po zahtjevu. Efikasan obrazac:
- Kada se oglas sačuva, geokodirajte njegovu adresu na serveru.
- Sačuvajte geografsku širinu i dužinu u bazi podataka.
- Mapa čita sačuvane koordinate; nikada ne geokodira pri prikazu stranice.
Provjerite uslove svakog dobavljača o tome koliko dugo smijete čuvati rezultate geokodiranja; razlikuju se.
Primjeri promptova
Jedna ugrađena mapa:
Na stranici Kontakt dodaj ugrađenu Google mapu 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 link "Uputstva za dolazak". Neka bude pune širine na telefonima i neka se učitava tek kada se približi (lazy-load).
Interaktivna mapa oglasa:
Dodaj geografsku širinu i dužinu u tabelu oglasa. Kada se oglas kreira ili se njegova adresa promijeni, geokodiraj ga na serveru pomoću ključa u GEOCODING_API_KEY i sačuvaj koordinate. Na stranici Pregled prikaži mapu s oznakom za svaki oglas koristeći Leaflet, s grupisanjem kada se oznake preklapaju. Klik na oznaku prikazuje naslov, cijenu i link. Mapa i lista treba da koriste iste filtere.
"U blizini":
Dodaj dugme "U blizini" koje traži lokaciju posjetioca i prikazuje oglase u krugu od 10 km, sortirane po udaljenosti. Ako odbije pristup lokaciji, neka može ukucati grad.
Korak po korak
- Izaberite vrstu mape iz tabele na vrhu.
- Napravite nalog kod dobavljača i projekat, i omogućite samo API-je koji su vam potrebni.
- Napravite ključeve: ključ za pregledanje ograničen na vaše domene (uključujući domen pregleda dok pravite) i, ako treba, serverski ključ za geokodiranje.
- Sačuvajte ključeve kao tajne i zatražite od alata da ih koristi; ključ za pregledanje je i dalje ograničen iako završi na stranici.
- Sačuvajte koordinate za svako mjesto u bazi podataka.
- Napravite mapu: oznake, iskačuće informacije, grupisanje i razuman početni zoom.
- Uparite je s listom. Sama mapa je teška za korištenje na telefonu i za čitače ekrana. Prikažite iste rezultate kao listu.
- Postavite upozorenje o budžetu u konzoli dobavljača.
- Objavite i testirajte na živom domenu, jer ograničenja referrera često blokiraju mapu dok se živi domen ne doda.
Česte greške
- Neograničeni ključevi. Svako može ponovo koristiti vaš ključ na svom sajtu.
- Geokodiranje pri svakom prikazu stranice. Sporo i skupo; geokodirajte jednom pri čuvanju.
- Zaboravljen živi domen u ograničenjima ključa. Radi u pregledu, a u produkciji siva prazna kutija.
- Raspored samo s mapom. Oznake bez liste su mučne na malim ekranima i nepristupačne.
- Stotine oznaka bez grupisanja. Nečitljivo i sporo.
- Nedostatak navođenja izvora. Većina dobavljača mapa i tile-ova to traži, a skrivanje krši njihove uslove.
- Traženje lokacije pri učitavanju stranice. Pitajte tek kada korisnik dodirne "U blizini".
Kontrolna lista
- Odabrana ispravna vrsta mape za zadatak
- Ključ za pregledanje ograničen na vaše domene i potrebne API-je
- Serverski ključevi čuvaju se u tajnama
- Koordinate sačuvane u bazi, geokodirane jednom
- Rezultati prikazani i kao lista
- Grupisanje za mnogo oznaka
- Navođenje izvora vidljivo
- Upozorenje o budžetu postavljeno kod dobavljača
- Testirano na objavljenom domenu i na telefonu
Dodavanje mapa s Mythexom
Mythex nema ugrađenu integraciju mapa; donosite sopstveni ključ dobavljača, dodajete ga kao tajnu projekta (ili ga zalijepite kada agent prikaže karticu s tajnama) i zatražite mapu u chatu, kao što je opisano u Integrate any API. Koordinate idu u bazu podataka projekta. Ne zaboravite da dodate i adresu pregleda i objavljenu adresu u ograničenja web stranice ključa i ponovo objavite nakon promjene tajni.
Mape obično stoje uz pretragu i oglase: pogledajte kako dodati pretragu u aplikaciju, kako napraviti web stranicu imenika i kako napraviti web stranicu za malu firmu.
Pitanja
Koji je najlakši način da dodam mapu na web stranicu?
Ugradite jednu mapu s oznakom, na primjer pomoću Google Maps Embed API-ja u iframe-u. Google u svojoj dokumentaciji kaže da su zahtjevi za Maps Embed besplatni, bez limita korištenja, ali i dalje vam treba API ključ.
Da li je Google Maps besplatan za korištenje u aplikaciji?
Djelimično. Od septembra 2026, Googlov cjenovnik po korištenju daje svakom Essentials SKU-u, uključujući Dynamic Maps, 10.000 besplatnih događaja mjesečno, a Maps Embed je neograničen i besplatan. I dalje vam treba Google Cloud projekat s uključenom naplatom da biste počeli.
Da li je moj Google Maps API ključ bezbjedan u pregledniku?
Ključevi za mape u pregledniku vidljivi su svakome, pa Google preporučuje da ih ograničite na adrese vaše web stranice i samo na API-je koje koristite. Ključevi za usluge na serveru, kao što je geokodiranje, treba da ostanu na serveru.
Mogu li besplatno koristiti OpenStreetMap?
Podaci OpenStreetMap-a su besplatni za korištenje uz navođenje izvora, ali njegovi javni tile serveri se finansiraju donacijama, bez garancije usluge, a pravila upozoravaju komercijalne korisnike da pristup može biti ukinut. Za produkcijsku aplikaciju koristite dobavljača tile-ova ili sami hostujte.