Cum pui corect Google Maps pe site ca să te găsească clienții și să nu-ți încetinească pagina

Ca să pui Google Maps pe site, caută firma în Google Maps pe calculator, apasă Trimite, alege fila Încorporează o hartă, apasă Copiază codul HTML și lipește codul într-un bloc HTML al paginii. Varianta asta e gratuită și nu cere cheie API. Ca harta să nu-ți încetinească pagina, las-o să se încarce doar când vizitatorul ajunge la ea și pune lângă ea un buton „Direcții” care deschide ruta direct în telefon.

Mai jos găsești pașii exacți, diferența dintre iframe și API-urile Google (ce e gratuit și ce nu în 2026), cum o încarci fără să pierzi viteză, ce faci cu acordul pentru cookies și problemele care apar cel mai des.

De ce merită făcut cum trebuie: cel mai enervant moment pentru un client nou nu e când nu-ți găsește prețul. E când stă în mașină în fața unei clădiri cu mai multe intrări și nu știe pe care e a ta, sau când îți deschide site-ul pe date mobile, în parcare, iar harta se tot încarcă. O hartă pusă corect rezolvă asta în două atingeri. Una pusă prost creează problema.

Pas cu pas: harta din Google Maps pe site-ul tău

• Deschide Google Maps pe calculator și caută numele firmei, nu doar adresa. Așa pinul arată firma ta, nu un punct anonim pe stradă.
• În panoul firmei apasă Trimite (iconița de partajare), apoi fila Încorporează o hartă. Dacă vrei doar o zonă de hartă, fără o firmă anume, mergi pe Meniu → Trimite sau încorporează harta.
• Alege dimensiunea (mică, medie, mare sau personalizată) și apasă Copiază codul HTML.
• Lipește codul pe pagina de contact: în WordPress, într-un bloc HTML personalizat; în Wix, Tilda sau alt constructor de site-uri, în elementul pentru cod HTML sau încorporare.
• Publică pagina și verifică pe telefon că pinul cade pe intrarea corectă.

La fel poți încorpora și un traseu: în Google Maps apeși Indicații de orientare, alegi punctul de plecare (de exemplu, gara sau o stație din apropiere), alegi ruta și urmezi aceiași pași. E util dacă la tine se ajunge mai ales cu transportul în comun.

Atenție la blocurile de hartă din teme și din constructorii de site-uri: unele îți cer un „Google Maps API Key”. Cheia se creează într-un proiect Google Cloud care trebuie să aibă cont de facturare, cu card atașat, chiar dacă folosești doar partea gratuită. De cele mai multe ori, astfel de blocuri folosesc Maps JavaScript API, care se plătește peste pragul gratuit. Dacă vrei doar să arăți o adresă, sari peste ele și lipește iframe-ul de mai sus într-un bloc HTML.

Iframe, Embed API sau JavaScript API: ce alegi

Când cineva spune „pun Google Maps pe site”, poate fi vorba de patru lucruri diferite, și se confundă des. Diferența e în cost, în cheia API și în cât de ușor se strică la întreținere.

Ce s-a schimbat la prețuri: din martie 2025, Google a înlocuit creditul lunar de 200 $ cu un prag gratuit separat pentru fiecare serviciu. Pentru hărțile dinamice făcute cu Maps JavaScript API, pragul e de 10.000 de încărcări pe lună; peste el plătești la fiecare 1.000 de încărcări, conform listei de prețuri Google Maps Platform. Maps Embed API rămâne gratuit și fără limită de cereri, dar cere cheie API, deci și un proiect Google Cloud cu cont de facturare.

Regula noastră: dacă ai o singură adresă, nu atinge JavaScript API. Iframe-ul sau linkul fac aceeași treabă, gratis, și sunt mai greu de stricat. API-ul are sens abia când ai multe locații pe care vrei să le filtrezi sau să le desenezi din baza ta de date.

Încă o întrebare care apare des: ai voie să pui harta pe site-ul firmei? Da. În ghidul de utilizare a hărților, Google spune că, dacă vrei doar să încorporezi o hartă Google pe site, nu ai nevoie de permisiunea lor. Altfel stau lucrurile doar când hărțile fac parte dintr-un produs care aduce bani, de exemplu o aplicație: acolo Google cere Google Maps Platform.

De ce harta îți încetinește pagina

O hartă Google nu e o poză. E o mică aplicație care, la încărcare, aduce de pe serverele Google scripturi, dale de imagine, fonturi și iconițe. Fiecare e o cerere în plus pe care telefonul o face pe date mobile, exact acolo unde te caută omul din parcare.

Poți vedea singur cât adaugă: deschide pagina de contact în Chrome, apasă F12 (pe Mac, Cmd + Option + I), intră în fila Network, reîncarcă pagina și uită-te jos la numărul de cereri și la volumul transferat. Apoi compară cu o pagină fără hartă.

Problema nu e că pui hartă. E că de cele mai multe ori ea se încarcă imediat, deși stă jos în pagină — sau, mai rău, în subsolul fiecărei pagini a site-ului. Plătești viteză peste tot pentru ceva ce omul poate nici nu vede.

Cum o încarci fără să pierzi viteză

Trei tehnici, de la cea mai simplă la cea mai eficientă:

• loading="lazy" pe iframe — un singur atribut, care îi spune browserului să amâne harta până când vizitatorul derulează aproape de ea. Îl înțeleg toate browserele mari: Chrome, Edge, Firefox și Safari. Verifică dacă iframe-ul tău îl are; dacă nu, adaugă-l.
• Încărcare la clic (recomandarea noastră) — în locul hărții arăți o imagine ușoară și un buton „Vezi harta”. Iframe-ul real se încarcă doar când omul apasă. În documentația Lighthouse, Google numește tiparul ăsta „fațadă” și îl recomandă pentru conținut terț greu, cum sunt playerele video.
• Doar link + buton „Direcții” — uneori nu ai nevoie deloc de hartă încorporată. Un buton care deschide Google Maps pe telefonul clientului, cu ruta pornită, cântărește aproape nimic.

Pentru imaginea de la încărcarea la clic, cea mai utilă e o fotografie a intrării: rezolvă din start și problema clădirii cu mai multe uși. Dacă vrei neapărat o imagine de hartă, Maps Static API o generează, dar cere cheie API și cont de facturare (are tot un prag gratuit de 10.000 de cereri pe lună).

Și încă ceva: pune harta doar pe pagina de contact, nu în subsolul tuturor paginilor. Pe restul site-ului ajunge un link „Cum ajungi la noi”.

Harta și acordul pentru cookies (GDPR)

Când iframe-ul se încarcă, browserul vizitatorului se conectează la serverele Google, care primesc adresa lui IP și pot seta cookie-uri. De aceea, multe site-uri din UE încarcă harta abia după ce vizitatorul își dă acordul — din bannerul de cookies sau cu un clic pe imaginea pusă în locul hărții.

Partea bună: încărcarea la clic rezolvă două probleme deodată, viteza și acordul. Pune pe imagine o propoziție scurtă, de tipul „Harta e furnizată de Google și se încarcă de pe serverele Google după ce apeși”, și menționează Google Maps în politica de confidențialitate. Pentru încadrarea exactă, verifică cu cine îți întocmește documentele GDPR.

Butonul „Direcții” — piesa pe care toată lumea o uită

Harta arată unde ești. Butonul de direcții îl duce pe om acolo. Sunt lucruri diferite, iar al doilea aduce clienți.

Linkul e simplu și nu cere cheie API: https://www.google.com/maps/dir/?api=1&destination= urmat de adresa ta, cu „+” în loc de spații. De exemplu: https://www.google.com/maps/dir/?api=1&destination=Strada+Exemplu+10+Cluj-Napoca. Parametrul api=1 e obligatoriu în orice astfel de link.

Ce face linkul, conform documentației Google Maps URLs:

• Pe Android și iPhone deschide aplicația Google Maps, dacă e instalată; altfel, Google Maps în browser. Pe calculator se deschide în browser.
• Dacă nu pui punct de plecare, Google pornește din cel mai relevant loc, de regulă locația telefonului.
• Pentru precizie poți adăuga destination_place_id (ID-ul locului firmei tale), dar Google cere ca linkul să conțină în continuare și destination.

Dacă mulți dintre clienții tăi folosesc Waze, pune un al doilea buton cu linkul https://waze.com/ul?ll=LAT,LON&navigate=yes, unde LAT și LON sunt coordonatele intrării. Pe telefon deschide aplicația Waze, pe calculator o pagină web.

Pune butoanele lângă adresă și telefon, sus pe pagina de contact, nu sub hartă. Fără ele îi ceri omului să copieze adresa, s-o lipească și s-o caute singur — pași la care mulți renunță.

Harta pe telefon: mărime și derulare

• Lățime 100% în locul lățimii fixe din codul copiat, ca harta să nu iasă din ecranul telefonului.
• Înălțime fixă, potrivită pentru telefon — Google nu suportă hărți încorporate mai mici de 200 px pe oricare latură.
• Margini libere în jurul hărții pe mobil, ca omul să poată derula pagina cu degetul fără să „prindă” harta.
• Adresa scrisă și ca text lângă hartă, cu telefonul ca link pe care se poate apăsa. Textul se citește instant, se poate copia și e înțeles de Google și de cititoarele de ecran.

Probleme frecvente și ce faci

• Pinul cade pe altă stradă — de obicei problema e în profilul firmei sau în adresa căutată, nu în cod. Vezi cum corectezi pinul în Google Maps.
• Harta apare întunecată, cu textul „For development purposes only”, sau cu mesajul că pagina nu poate încărca corect Google Maps — de obicei e o hartă făcută cu JavaScript API: cheie lipsă sau restricționată greșit, API neactivat în proiect ori facturare neactivată. Pașii sunt în harta Google nu se încarcă pe site.
• Harta nu mai apare după ce ai pus bannerul de cookies — bannerul o blochează până la acord. E în regulă, dar în locul ei trebuie să stea o imagine și un buton, nu un spațiu gol.
• Codul dispare după ce salvezi în WordPress — de regulă, rolul contului tău (de exemplu Autor sau Colaborator) nu are voie să insereze cod HTML. Salvează pagina dintr-un cont de administrator sau cere-i administratorului s-o facă.
• Harta iese din ecran pe telefon — iframe-ul are lățime fixă în pixeli; schimbă-o în 100%.

Detaliile care fac diferența

• Adresă corectă, aceeași peste tot — pe site, în profilul firmei și în hartă. Dacă datele din profil nu sunt puse la punct, începe de acolo; despre asta scriem în ce este Google Business Profile.
• Titlu descriptiv pe iframe — un atribut title, de exemplu „Harta: [numele firmei]”, ajută cititoarele de ecran. Mărunt, dar corect.
• Test pe telefon real — deschide pagina pe date mobile, nu doar pe wi-fi-ul din birou. Acolo se vede dacă harta trage pagina în jos.
• O singură hartă — jos pe pagina de contact, lângă program și telefon. În rest, link.

Harta e utilă mai ales ca parte dintr-o strategie de vizibilitate locală, nu de una singură. Dacă vrei să apari când cineva caută „lângă mine”, citește și SEO local.

Cât costă să o facem noi

Dacă nu vrei să te atingi de cod, o punem noi corect: hartă care se încarcă doar când e nevoie, buton de direcții, testată pe telefon. La site-urile pe care le construim, integrarea intră în pachet.

Suntem o echipă mică din Cluj-Napoca și lucrăm la distanță cu clienți din toată România. Nu-ți vindem un „store locator” de care n-ai nevoie — punem exact ce te ajută pe tine.

Vrei să vezi cum arată la tine, fără să plătești nimic? Scrie-ne pe WhatsApp la wa.me/40750257140 și îți facem un demo gratuit de site — cu harta și butonul de direcții deja puse cum trebuie.