Harta Google de pe pagina de contact e goală sau cenușie — cum o repari

Ai deschis pagina de contact și în locul hărții e un dreptunghi gri, o hartă acoperită de un mesaj „For development purposes only" sau, pur și simplu, nimic. Pentru un client care caută cum ajunge la tine, e ca și cum ai fi mutat adresa fără să spui nimănui. Vestea bună: aproape de fiecare dată e o problemă mică, de configurare, nu ceva stricat definitiv.

În articolul ăsta îți arăt, pe înțelesul tuturor, care sunt cauzele reale (nu toate țin de vreo „cheie API scumpă") și cum le repari pas cu pas. Cel mai important lucru pe care vreau să-l reții: pentru o simplă hartă cu adresa firmei, în cele mai multe cazuri nici nu ai nevoie de cheie API. Există o variantă gratuită, care nu se mai strică.

Întâi află CE fel de hartă ai pe pagină

Înainte de orice, trebuie să știi ce tip de hartă folosește site-ul tău, pentru că soluția diferă. Sunt două variante:

• Harta simplă prin iframe (Embed) — codul arată ca `<iframe src="https://www.google.com/maps/embed?...">`. Asta e varianta gratuită, nu are nevoie de cheie API și e cea recomandată pentru majoritatea firmelor.
• Harta prin JavaScript (Maps JavaScript API) — în cod apare `maps.googleapis.com/maps/api/js?key=...`. Asta necesită o cheie API, un cont de facturare activ la Google și e de obicei sursa mesajelor de eroare.

Ca să vezi ce ai, deschide pagina de contact, dă click dreapta pe zona hărții și alege „Inspectează". Caută cuvintele `embed` sau `api/js`. Dacă apar erori scrise cu roșu în consolă (tab-ul „Console"), notează-le — ele îți spun exact care e problema.

Mesajele de eroare tipice și ce înseamnă fiecare

Dacă folosești varianta cu cheie API, harta îți spune singură ce o supără. Cele mai frecvente:

• „For development purposes only" (hartă acoperită de un filigran) — facturarea nu e activată pe proiectul Google Cloud, sau cheia nu are un cont de plată legat.
• BillingNotEnabledMapError — același lucru: trebuie activată facturarea, chiar dacă rămâi în limita gratuită lunară.
• RefererNotAllowedMapError — cheia e restricționată pe alt domeniu. Ai schimbat domeniul, ai trecut de pe HTTP pe HTTPS, sau ai lansat un site nou, iar adresa actuală nu e pe lista permisă.
• ApiNotActivatedMapError — nu ai activat serviciul „Maps JavaScript API" în consola Google Cloud.
• InvalidKeyMapError — cheia e greșită, ștearsă sau copiată prost.

Mesajul îl vezi fie pe hartă, fie în consola browserului. El e harta ta către soluție — literal.

Soluția simplă: treci pe embed gratuit, fără cheie

Dacă tot ce vrei e o hartă cu adresa firmei, unde clientul apasă și pornește navigația, nu ai nevoie de nicio cheie API. Faci așa:

1. Intră pe Google Maps, caută adresa exactă a firmei (ideal, profilul tău de Google Business).

2. Apasă Distribuie (Share) → tab-ul Încorporează o hartă (Embed a map).

3. Alege dimensiunea și copiază tot codul `<iframe ...>`.

4. Lipește-l în pagina de contact, în locul hărții vechi.

Gata. Codul ăsta nu depinde de facturare, nu expiră și nu-ți mai dă mesaje de eroare. E soluția pe care o recomand celor mai multe firme locale, pentru că e „set-and-forget": o pui o dată și nu te mai gândești la ea. Cheia API rămâne utilă doar dacă ai nevoie de hărți interactive complexe (pinuri multiple, stiluri, calcul de rute în site).

Dacă vrei să păstrezi cheia API — reparația corectă

Uneori site-ul e construit deja pe Maps JavaScript API și nu vrei să-l rescrii. Atunci verifică, în ordine:

• Facturare activă: în Google Cloud Console, proiectul trebuie să aibă un cont de plată legat. Google oferă un plafon gratuit lunar generos pentru o firmă mică, dar cardul trebuie să existe în cont.
• Serviciul activat: activează „Maps JavaScript API" (și „Maps Embed API" dacă folosești embed cu cheie).
• Restricțiile cheii: la „Application restrictions" → „HTTP referrers", adaugă domeniul tău corect — atât cu `www`, cât și fără, și pe HTTPS. O greșeală clasică e să treci doar `exemplu.ro` și să uiți `www.exemplu.ro`.
• Mixed content: dacă site-ul e pe HTTPS dar harta e chemată pe HTTP, browserul o blochează. Totul trebuie să fie `https://`.

După orice modificare de cheie, așteaptă câteva minute — Google nu aplică schimbările instant.

Cauze mai puțin evidente: bannerul de cookie și blocanții

Uneori harta e configurată corect, dar tot nu apare. Verifică și astea:

• Bannerul de consimțământ (cookie) — multe soluții GDPR blochează hărțile Google până când vizitatorul acceptă cookie-urile de marketing. E corect din punct de vedere legal, dar mulți vizitatori refuză și rămân fără hartă. Soluția e ori un „placeholder" cu buton „Afișează harta", ori revenirea la embed-ul simplu, tratat ca element de bază.
• Extensii de blocare (ad blocker) — unele blochează scripturile Google. Testează harta într-o fereastră incognito, fără extensii, ca să excluzi asta.
• Cache — după ce repari, golește cache-ul site-ului și al browserului, altfel vezi tot versiunea veche, stricată.

Dacă ai încercat toate astea și tot nu merge, sau nu vrei să te bați cu consola Google Cloud, scrie-ne pe WhatsApp la MPO Web Studio. Ne uităm remote, îți spunem exact ce e și, de multe ori, o rezolvăm pe loc — lucrăm la distanță în toată țara și îți arătăm întâi un demo, fără costuri.