Kako dodati mape vašoj aplikaciji: ugradnje, interaktivne mape i lokatori prodavnica

Da biste dodali mapu aplikaciji, prvo odlučite da li vam treba statička ugradnja (jedna lokacija sa pinom, poput "pronađite našu prodavnicu") ili interaktivna mapa (mnogo pinova iz vaših podataka, filteri, grupisanje, "u blizini"). Za jednu lokaciju ugrađena mapa je najbrža i, uz Googleov Maps Embed API, besplatna. Za interaktivne mape koristite biblioteku za mape u JavaScriptu — Google Maps JavaScript API, Mapbox GL JS ili otvorenu Leaflet sa provajderom pločica — čuvajte geografsku širinu i dužinu svakog mesta u bazi i ograničite API ključ na vaš domen. Detalji o provajderima ispod su iz njihove sopstvene dokumentacije, zaključno sa septembrom 2026.

Kakvu mapu vam treba?

Većini malih poslovnih sajtova treba samo prvi red. Direktorijumima, tržištima i sajtovima sa oglasima trebaju treći i četvrti red.

Vaše opcije

Google Maps Platform

Googleov vodič za početak navodi da morate da napravite Cloud projekat sa omogućenom naplatom i omogućite API-je koje želite. Njegove cene po korišćenju daju Essentials SKU-e, uključujući Dynamic Maps, sa mesečnim besplatnim limitom od 10.000 događaja, i navode Dynamic Maps po 7,00 USD za svakih 1.000 događaja iznad toga (na prvom nivou cena). Maps Embed SKU je naveden kao neograničen i besplatan. Google takođe prodaje mesečne pretplatničke planove. Pogledajte cene Google Maps Platform za aktuelne brojeve.

Mapbox

Mapboxova stranica sa cenama navodi 50.000 besplatnih mesečnih učitavanja mape za Mapbox GL JS na vebu, zatim 5,00 USD po 1.000 učitavanja. Pogledajte Mapbox cene.

Leaflet i OpenStreetMap

Leaflet sebe opisuje kao biblioteku otvorenog koda za interaktivne mape prilagođene telefonu, veličine oko 42 KB JavaScripta. Potrebne su mu pločice mape (slike karte) negde sa izvora. Javni serveri za pločice OpenStreetMapa su privlačni, ali pravila o korišćenju pločica zahtevaju vidljivo navođenje autora, zabranjuju masovno preuzimanje, ne nude garanciju usluge i upozoravaju da komercijalne usluge mogu izgubiti pristup. Za pravi proizvod koristite komercijalni ili samostalno hostovan izvor pločica koji radi sa Leafletom.

API ključevi: javni, ali ograničeni

Ključevi za mape koji se koriste u pregledaču vidljivi su svakome ko otvori vašu stranicu. To je očekivano, ali znači da neko može da kopira ključ i potroši vaš budžet. Googleov bezbednosni vodič preporučuje ograničenja po veb adresi (HTTP referrer) sa vašim domenima i ograničenja API-ja tako da ključ radi samo za API-je koje koristite.

Ključevi za servise na serveru — na primer 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 provajdera, da greška ne može da 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, i većina provajdera naplaćuje ga po zahtevu. Efikasan obrazac:

1. Kada se oglas sačuva, geokodirajte njegovu adresu na serveru.
2. Sačuvajte geografsku širinu i dužinu u bazi.
3. Mapa čita sačuvane koordinate; nikad ne geokodira pri otvaranju stranice.

Proverite uslove svakog provajdera o tome koliko dugo smete da čuvate rezultate geokodiranja; razlikuju se.

Primeri promptova

Jedna ugrađena mapa:

Na Kontakt stranici dodaj ugrađenu Google mapu koja prikazuje našu adresu (12 High Street, Leeds) koristeći Maps Embed API, sa ključem u GOOGLE_MAPS_EMBED_KEY. Ispod dodaj link "Uputstva za dolazak". Neka bude pune širine na telefonima i neka se lenjo učitava.

Interaktivna mapa oglasa:

Dodaj geografsku širinu i dužinu u tabelu listings. Kada se oglas kreira ili se promeni njegova adresa, geokodiraj ga na serveru sa ključem u GEOCODING_API_KEY i sačuvaj koordinate. Na stranici Pregledaj prikaži mapu sa markerom za svaki oglas koristeći Leaflet, sa grupisanjem kada se markeri preklapaju. Klik na marker prikazuje naziv, cenu i link. Mapa i lista treba da koriste iste filtere.

"U blizini":

Dodaj dugme "U blizini" koje traži lokaciju posetioca i prikazuje oglase do 10 km, sortirane po udaljenosti. Ako odbije pristup lokaciji, neka može da ukuca grad.

Korak po korak

1. Izaberite vrstu mape iz tabele na vrhu.
2. Napravite nalog kod provajdera i projekat, i omogućite samo API-je koji vam trebaju.
3. Napravite ključeve: ključ za pregledač ograničen na vaše domene (uključujući domen pregleda dok pravite) i, ako treba, serverski ključ za geokodiranje.
4. Sačuvajte ključeve kao tajne i zamolite AI da ih koristi; ključ za pregledač je i dalje ograničen iako završi na stranici.
5. Sačuvajte koordinate za svako mesto u bazi.
6. Napravite mapu: markere, iskačuće prozore, grupisanje i razuman početni zum.
7. Upari je sa listom. Sama mapa je teška za korišćenje na telefonu i za čitače ekrana. Prikažite iste rezultate kao listu.
8. Postavite upozorenje o budžetu u konzoli provajdera.
9. Objavite i testirajte na živom domenu, jer ograničenja po referreru često blokiraju mapu dok se živi domen ne doda.

Česte greške

• Neograničeni ključevi. Svako može da ih ponovo koristi na svom sajtu.
• Geokodiranje pri svakom otvaranju stranice. Sporo i skupo; geokodirajte jednom pri čuvanju.
• Zaboravljen živi domen u ograničenjima ključa. Radi u pregledu, a u produkciji sivi prazan okvir.
• Raspored samo sa mapom. Pinovi bez liste su mučni na malim ekranima i nepristupačni.
• Stotine markera bez grupisanja. Nečitljivo i sporo.
• Nedostaje navođenje autora. Većina provajdera mapa i pločica to zahteva, a skrivanje krši njihove uslove.
• Traženje lokacije pri učitavanju stranice. Pitajte tek kada korisnik dodirne "U blizini".

Lista za proveru

• Izabrana je pravilna vrsta mape za zadatak
• Ključ za pregledač 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 markera
• Navođenje autora vidljivo
• Upozorenje o budžetu postavljeno kod provajdera
• Testirano na objavljenom domenu i na telefonu

Dodavanje mapa uz Mythex

Mythex nema ugrađenu integraciju mapa; sami donosite ključ provajdera, dodajete ga kao tajnu projekta (ili ga nalepite kada agent prikaže karticu sa tajnama), i tražite mapu u chatu, kako je opisano u Integriši bilo koji API. Koordinate idu u bazu podataka projekta. Zapamtite da dodate i domen pregleda i objavljeni domen u ograničenja ključa po veb adresi, i ponovo objavite nakon promene tajni.

Mape obično stoje uz pretragu i oglase: pogledajte kako dodati pretragu aplikaciji, kako napraviti sajt direktorijuma i kako napraviti sajt za malo preduzeće.

Pitanja