A Google-térkép üres a kapcsolat oldaladon – így javítod ki

Megnyitod a kapcsolat oldaladat, és ahol a térképnek kellene lennie, ott egy szürke téglalapot látsz, egy „For development purposes only” vízjellel lefedett térképet, vagy egyszerűen semmit. Egy vevő számára, aki meg akar találni, ez olyan, mintha elköltöztél volna anélkül, hogy szóltál volna róla. A jó hír: szinte mindig egy apró beállítási problémáról van szó, nem valami véglegesen tönkrement dologról.

Ebben a cikkben végigveszem a valódi okokat közérthető nyelven (nem mindegyikhez tartozik „drága API-kulcs”), és hogy mindegyiket hogyan javítsd ki, lépésről lépésre. A legfontosabb, amit érdemes megjegyezni: egy egyszerű térképhez, amely a vállalkozásod címét mutatja, a legtöbb esetben nincs is szükséged API-kulcsra. Létezik egy ingyenes megoldás, amely nem romlik el.

Először derítsd ki, MELYIK fajta térképed van

Bármi más előtt tudnod kell, milyen típusú térképet használ az oldalad, mert ettől függ a javítás. Két változat létezik:

• Egyszerű iframe térkép (Embed) – a kód így néz ki: `<iframe src="https://www.google.com/maps/embed?...">`. Ez az ingyenes változat, nem igényel API-kulcsot, és ezt ajánlom a legtöbb vállalkozásnak.
• JavaScript térkép (Maps JavaScript API) – a kód tartalmazza a `maps.googleapis.com/maps/api/js?key=...` részt. Ehhez API-kulcs kell, egy aktív számlázási fiók a Google-nél, és általában ez a hibaüzenetek forrása.

Hogy megnézd, melyik van, nyisd meg a kapcsolat oldalt, kattints jobb gombbal a térkép területére, és válaszd a „Vizsgálat” (Inspect) lehetőséget. Keresd az `embed` vagy `api/js` szavakat. Ha pirossal hibák jelennek meg a konzolban (a „Console” fül), írd le őket – pontosan megmondják, mi a baj.

A tipikus hibaüzenetek és mit jelent mindegyik

Ha az API-kulcsos változatot használod, a térkép maga megmondja, mi bántja. A leggyakoribbak:

• „For development purposes only” (vízjellel lefedett térkép) – nincs engedélyezve a számlázás a Google Cloud projekten, vagy a kulcshoz nincs fizetési fiók csatolva.
• BillingNotEnabledMapError – ugyanaz: a számlázást engedélyezni kell, még akkor is, ha az ingyenes havi kereten belül maradsz.
• RefererNotAllowedMapError – a kulcs egy másik domainre van korlátozva. Domaint váltottál, HTTP-ről HTTPS-re költöztél, vagy új oldalt indítottál, és a jelenlegi cím nincs az engedélyezett listán.
• ApiNotActivatedMapError – nem aktiváltad a „Maps JavaScript API” szolgáltatást a Google Cloud konzolban.
• InvalidKeyMapError – a kulcs hibás, törölték, vagy rosszul másolták be.

Az üzenetet vagy a térképen, vagy a böngésző konzoljában látod. Ez a megoldáshoz vezető térképed – szó szerint.

Az egyszerű javítás: válts az ingyenes beágyazásra, kulcs nélkül

Ha csak egy térképet szeretnél a vállalkozásod címével, amelyre a vevők rákoppintanak, hogy elindítsák a navigációt, nincs szükséged semmilyen API-kulcsra. Így teheted meg:

1. Menj a Google Maps oldalra, keresd meg a vállalkozásod pontos címét (ideális esetben a Google Business profilodat).

2. Kattints a Megosztás → Térkép beágyazása (Embed a map) fülre.

3. Válaszd ki a méretet, és másold ki a teljes `<iframe ...>` kódot.

4. Illeszd be a kapcsolat oldaladra, a régi térkép helyére.

Kész. Ez a kód nem függ a számlázástól, nem jár le, és nem dob rád hibaüzeneteket. Ezt ajánlom a legtöbb helyi vállalkozásnak, mert „beállítod és elfelejted”: egyszer elhelyezed, és többé nem kell rá gondolnod. Az API-kulcs csak akkor marad hasznos, ha összetett, interaktív térképekre van szükséged (több jelölő, egyedi stílus, oldalon belüli útvonaltervezés).

Ha meg akarod tartani az API-kulcsot – a helyes javítás

Néha az oldal már a Maps JavaScript API-ra épül, és nem akarod újraírni. Akkor ellenőrizd, sorrendben:

• Aktív számlázás: a Google Cloud Console-ban a projektnek fizetési fiókhoz kell kapcsolódnia. A Google nagyvonalú ingyenes havi keretet kínál egy kisvállalkozásnak, de kell egy kártyának lennie a fiókon.
• Engedélyezett szolgáltatás: aktiváld a „Maps JavaScript API”-t (és a „Maps Embed API”-t, ha kulcsos beágyazást használsz).
• Kulcs-korlátozások: az „Application restrictions” → „HTTP referrers” alatt add hozzá helyesen a domainedet – `www`-vel és anélkül is, HTTPS-en. Klasszikus hiba csak az `example.com` hozzáadása, és megfeledkezni a `www.example.com`-ról.
• Vegyes tartalom (mixed content): ha az oldal HTTPS-en van, de a térképet HTTP-n hívja, a böngésző blokkolja. Mindennek `https://`-nek kell lennie.

Bármilyen kulcsváltoztatás után várj néhány percet – a Google nem alkalmazza azonnal a módosításokat.

Kevésbé nyilvánvaló okok: a cookie-sáv és a blokkolók

Néha a térkép helyesen van beállítva, mégsem jelenik meg. Ezeket is ellenőrizd:

• Hozzájárulási (cookie) sáv – sok GDPR-megoldás blokkolja a Google Maps-et, amíg a látogató el nem fogadja a marketing sütiket. Ez jogilag helyes, de sok látogató elutasítja, és a végén nem lesz térkép. A megoldás vagy egy helyőrző „Térkép megjelenítése” gombbal, vagy a visszatérés az egyszerű beágyazáshoz, alapelemként kezelve.
• Blokkoló bővítmények (reklámblokkolók) – néhányuk blokkolja a Google szkripteket. Teszteld a térképet egy inkognitó ablakban, bővítmények nélkül, hogy ezt kizárd.
• Gyorsítótár (cache) – miután kijavítottad, ürítsd ki az oldal és a böngésző gyorsítótárát, különben továbbra is a régi, hibás verziót látod.

Ha mindezt kipróbáltad, és még mindig nem működik, vagy inkább nem birkóznál a Google Cloud konzollal, írj nekünk WhatsApp-on az MPO Web Studio-nál. Távolról megnézzük, pontosan megmondjuk, mi a baj, és gyakran a helyszínen kijavítjuk – országszerte távolról dolgozunk, és először egy demót mutatunk neked, ingyen.