Cum adaugi hărți în aplicația ta: încorporări, hărți interactive și localizatoare de magazine

Pentru a adăuga o hartă în aplicația ta, decide mai întâi dacă ai nevoie de o încorporare statică (un singur loc cu un marcaj, precum „găsește magazinul nostru”) sau de o hartă interactivă (multe marcaje din datele tale, filtre, grupare, „lângă mine”). Pentru un singur loc, o hartă încorporată este cea mai rapidă și, cu Maps Embed API de la Google, gratuită. Pentru hărți interactive, folosește o bibliotecă JavaScript pentru hărți — Google Maps JavaScript API, Mapbox GL JS sau Leaflet, open-source, cu un furnizor de tile-uri — stochează latitudinea și longitudinea fiecărui loc în baza de date și restricționează cheia API la propriul domeniu. Detaliile furnizorilor de mai jos sunt din documentația fiecărui furnizor, la zi cu septembrie 2026.

Ce fel de hartă ai nevoie?

Majoritatea site-urilor mici de afaceri au nevoie doar de primul rând. Directoarele, marketplace-urile și site-urile de anunțuri au nevoie de al treilea și al patrulea.

Opțiunile tale

Google Maps Platform

Ghidul de pornire al Google spune că trebuie să creezi un proiect Cloud cu facturare activată și să activezi API-urile pe care le vrei. Prețurile pe măsura utilizării includ SKU-uri Essentials, printre care Dynamic Maps, cu un plafon lunar gratuit de 10.000 de evenimente, și listează Dynamic Maps la 7,00 dolari la 1.000 de evenimente peste acest prag (la primul nivel de volum). SKU-ul Maps Embed este listat ca nelimitat și gratuit. Google vinde și planuri lunare pe abonament. Verifică prețurile Google Maps Platform pentru cifrele actuale.

Mapbox

Pagina de prețuri Mapbox listează 50.000 de încărcări gratuite de hărți pe lună pentru Mapbox GL JS pe web, apoi 5,00 dolari la 1.000 de încărcări. Vezi prețurile Mapbox.

Leaflet și OpenStreetMap

Leaflet se descrie ca o bibliotecă JavaScript open-source pentru hărți interactive adaptate pentru mobil, de aproximativ 42 KB de JavaScript. Are nevoie de tile-uri de hartă (imaginile hărții) de undeva. Serverele publice de tile-uri ale OpenStreetMap sunt tentante, dar politica de utilizare a tile-urilor cere atribuire vizibilă, interzice descărcarea în masă, nu oferă nicio garanție de serviciu și avertizează că serviciile comerciale pot pierde accesul. Pentru un produs real, folosește o sursă comercială sau self-hosted de tile-uri care funcționează cu Leaflet.

Chei API: publice, dar restricționate

Cheile de hartă folosite în browser sunt vizibile pentru oricine deschide pagina ta. Asta este normal, dar înseamnă că cineva ar putea copia cheia ta și ar putea consuma din factura ta. Recomandarea de securitate a Google este să adaugi restricții de site web (HTTP referrer) cu domeniile tale și restricții de API, ca cheia să funcționeze doar pentru API-urile pe care le folosești.

Cheile pentru servicii pe server — de exemplu geocodarea a mii de adrese — ar trebui să fie chei separate, păstrate în secrete de pe server, nu în pagină. Setează și alerte de buget sau cote în consola furnizorului, ca o greșeală să nu se transforme într-o factură mare.

Geocodare: transformă adresele în coordonate o singură dată

Hărțile trasează latitudine și longitudine, nu adrese. Conversia unei adrese în coordonate se numește geocodare, iar majoritatea furnizorilor o taxează pe cerere. Modelul eficient:

1. Când un anunț este salvat, geocodează-i adresa pe server.
2. Stochează latitudinea și longitudinea în baza de date.
3. Harta citește coordonatele stocate; niciodată nu face geocodare la vizualizarea paginii.

Verifică termenii fiecărui furnizor privind cât timp ai voie să stochezi rezultatele geocodării; diferă.

Exemple de prompturi

O singură hartă încorporată:

Pe pagina Contact, adaugă o hartă Google încorporată care arată adresa noastră (12 High Street, Leeds), folosind Maps Embed API, cu cheia din GOOGLE_MAPS_EMBED_KEY. Sub ea, adaugă un link „Obține indicații”. Fă-o pe toată lățimea pe telefoane și încarc-o leneș.

O hartă interactivă a anunțurilor:

Adaugă latitudine și longitudine în tabelul de anunțuri. Când un anunț este creat sau adresa lui se schimbă, geocodează-l pe server cu cheia din GEOCODING_API_KEY și salvează coordonatele. Pe pagina Browse, arată o hartă cu un marcaj per anunț, folosind Leaflet, cu grupare când marcajele se suprapun. Un clic pe marcaj arată titlul, prețul și un link. Harta și lista trebuie să folosească aceleași filtre.

„Lângă mine”:

Adaugă un buton „Lângă mine” care cere locația vizitatorului și arată anunțurile din 10 km, sortate după distanță. Dacă refuză accesul la locație, lasă-l să scrie un oraș.

Pas cu pas

1. Alege tipul de hartă din tabelul de la început.
2. Creează contul la furnizor și un proiect, și activează doar API-urile de care ai nevoie.
3. Creează chei: o cheie pentru browser, restricționată la domeniile tale (inclusiv domeniul de previzualizare cât construiești) și, dacă e nevoie, o cheie de server pentru geocodare.
4. Stochează cheile ca secrete și cere constructorului să le folosească; cheia din browser rămâne restricționată chiar dacă ajunge în pagină.
5. Stochează coordonatele pentru fiecare loc în baza de date.
6. Construiește harta: marcaje, popup-uri, grupare și un nivel de zoom implicit sensibil.
7. Asociaz-o cu o listă. Doar o hartă este greu de folosit pe telefon și pentru cititoarele de ecran. Arată aceleași rezultate ca listă.
8. Setează o alertă de buget în consola furnizorului.
9. Publică și testează pe domeniul live, deoarece restricțiile de referrer blochează adesea harta până când adaugi domeniul live.

Greșeli frecvente

• Chei nerestricționate. Oricine le poate refolosi pe propriul site.
• Geocodare la fiecare vizualizare de pagină. Lentă și scumpă; geocodează o dată, la salvare.
• Uitarea domeniului live în restricțiile cheii. Funcționează în previzualizare, iar în producție apare o casetă gri goală.
• Machete doar cu hartă. Marcajele fără listă sunt incomode pe ecrane mici și inaccesibile.
• Sute de marcaje fără grupare. Ilizibile și lente.
• Lipsa atribuirii. Majoritatea furnizorilor de hărți și tile-uri o cer, iar ascunderea ei încalcă termenii lor.
• Cererea locației la încărcarea paginii. Cere-o doar când utilizatorul apasă „Lângă mine”.

Listă de verificare

• Tipul de hartă potrivit pentru sarcină
• Cheia din browser restricționată la domeniile tale și la API-urile necesare
• Cheile de pe server păstrate în secrete
• Coordonatele stocate în baza de date, geocodate o singură dată
• Rezultatele arătate și ca listă
• Grupare pentru multe marcaje
• Atribuirea vizibilă
• Alertă de buget setată la furnizor
• Testat pe domeniul publicat și pe telefon

Adăugarea hărților cu Mythex

Mythex nu are integrare de hărți încorporată; aduci propria cheie de la furnizor, o adaugi ca secret de proiect (sau o lipești când agentul afișează un card pentru secrete) și ceri harta în chat, așa cum se descrie în Integrează orice API. Coordonatele merg în baza de date a proiectului. Nu uita să adaugi atât domeniul de previzualizare, cât și pe cel publicat în restricțiile de site web ale cheii și publică din nou după ce schimbi secretele.

Hărțile stau de obicei lângă căutare și anunțuri: vezi cum adaugi căutare în aplicația ta, cum construiești un site de director și cum construiești un site pentru o mică afacere.

Întrebări