Hogyan tedd fel a Google Maps térképet az oldaladra helyesen — hogy az ügyfelek megtaláljanak, anélkül, hogy lelassulna az oldal

Egy új ügyfél számára nem az a legbosszantóbb pillanat, amikor nem találja az árat. Hanem az, amikor az autóban ül egy három bejáratú épület előtt, és nem biztos benne, melyik a tiéd. Vagy amikor 4G-n nyitja meg az oldaladat a parkolóban, és a térkép öt másodpercig pörög, mielőtt megjelenne a tű. Mindkét esetben egy jól elhelyezett térkép két koppintással megoldja. Egy rosszul elhelyezett viszont létrehozza a problémát.

Sokan azt hiszik, hogy a "tedd fel a Google Maps-et az oldalra" egyetlen dolgot jelent. Valójában három külön döntés — milyen típusú térkép, hogyan töltöd be, és melyik gomb áll mellette — és mindegyiknek van olyan változata, amely feleslegesen lassítja az oldalad.

Az egyszerű térkép (embed) kontra a dinamikus térkép (API)

Két teljesen különböző módja van a térkép hozzáadásának, és ezeket folyamatosan összekeverik.

• Egyszerű beágyazás (embed) — menj a Google Maps-re, keresd meg a címed, kattints a Megosztás → Térkép beágyazása lehetőségre, másold ki az `iframe` kódot. Nincs API-kulcs, nincs kártya, ingyenes és korlátlan. A helyi vállalkozások 95%-ának ez a helyes válasz.
• Dinamikus térkép (Maps JavaScript API) — ezt csak akkor használd, ha valóban egyedi funkciókra van szükséged: több tű az adatbázisodból, szűrők, üzletkereső több tucat helyszínnel. Ehhez API-kulcs és számlázási fiók kell, van havi ingyenes plafonja (a Google Maps Platform dokumentációja szerint körülbelül 10 000 betöltés/hó), és e fölött fizetsz. A Google azt az univerzális 200 dolláros havi jóváírást is megszüntette, amelyre sokan támaszkodtak.

A mi szabályunk: ha egyetlen címed van, ne nyúlj az API-hoz. Az egyszerű beágyazás pontosan ugyanazt a feladatot végzi el, ingyen, és nehezebb elrontani.

Miért lassítja le a térkép az oldalad (és mennyivel)

Egy Google-térkép nem fénykép. Ez egy kis program: szkripteket, képcsempéket, betűtípusokat, ikonokat tölt be. Amikor egy élő, görgethető térképet tartalmazó oldalt tesztelsz, több tucat plusz hálózati kérést és több száz plusz kilobájtot láthatsz — olyan súlyt, amely mobilon, mobilneten a legérezhetőbb, pontosan ott, ahol a parkolóban álló ember keres téged.

A probléma nem az, hogy térképet adsz hozzá. Hanem az, hogy a legtöbben úgy állítják be, hogy azonnal töltsön be, pedig a térkép lent van a láblécben, ahová a látogató csak azután érkezik, hogy mindent elolvasott. Oldalsebességgel fizetsz valamiért, amit az illető talán soha nem is lát.

Hogyan töltsd be úgy, hogy ne fizess érte sebességben

Három technika, a legegyszerűbbtől a leghatékonyabbig:

• `loading="lazy"` az iframe-en — egyetlen attribútum. Azt mondja a böngészőnek, hogy halassza el a térképet, amíg a látogató a közelébe nem görget. Ez az abszolút minimum, és bárki megteheti, aki átmásolja a beágyazó kódot.
• Kattintásra betöltés (a mi ajánlásunk) — először egy könnyű, statikus képet mutatsz a térképről egy "Térkép megtekintése" gombbal. Az igazi térkép csak akkor töltődik be, amikor az illető rákattint. Ez a lehető leggyorsabb minta: az oldal nem cipeli a térkép súlyát, amíg valaki tényleg nem akarja.
• Csak egy link + egy "Útvonaltervezés" gomb — néha nincs is szükséged beágyazott térképre. Egy gomb, amely megnyitja a Google Maps alkalmazást az ügyfél telefonján, már elindított útvonallal, gyakran minden, amire szükséged van — és szinte semmit sem nyom.

Sok bemutatkozó oldalnál a nyerő kombináció ez: egy statikus kép a helyszínről + egy nagy "Megnyitás a Google Maps-ben / Útvonaltervezés" gomb. Gyors, világos, nulla vesződség.

Az "Útvonaltervezés" gomb — az elem, amit mindenki elfelejt

A térkép megmutatja, *hol* vagy. Az útvonaltervező gomb *odaviszi* az illetőt. Ezek különböző dolgok, és a második az, amelyik ügyfeleket hoz.

Telefonon egy megfelelő link közvetlenül megnyitja a navigációs alkalmazást a jelenlegi helyzetből kiszámított útvonallal. A szerkezet egyszerű: egy link a `google.com/maps/dir/?api=1&destination=` címre, amelyet a címed vagy a koordinátáid követnek. Egy kattintás, és az ügyfél már úton van hozzád. Enélkül arra kéred, hogy másolja ki a címet, illessze be kézzel, keressen rá — három lépés, ahol a fele feladja.

A részletek, amelyek a különbséget jelentik

• Helyes cím, mindenhol ugyanaz — a térképnek a valódi helyszínre kell mutatnia, nem a szomszédos utcára. Ha a tű rossz helyen van, akkor először egy Google Business Profile-t kell rendbe tenned; ezt külön tárgyaljuk a mi az a Google Business Profile cikkben.
• Leíró iframe-cím — a térképen lévő `title` attribútum segíti a hozzáférhetőséget és a képernyőolvasókat. Apróság, de helyes.
• Tesztelj valódi telefonon — nyisd meg az oldalt 4G-n, ne csak az irodai wi-fin. Itt látod, hogy a térkép lehúzza-e az oldalt.
• Ne tegyél be két térképet — egyet, alul, a nyitvatartásod és telefonszámod mellé. Minden más csak link.

Egy térkép a helyi láthatósági stratégia részeként a leghasznosabb, nem önmagában. Ha meg szeretnél jelenni, amikor valaki azt keresi, hogy "a közelemben", olvasd el a helyi SEO cikket is.

Mennyibe kerül, ha mi csináljuk meg

Ha inkább nem nyúlnál a kódhoz, mi rendesen betesszük — könnyű térkép, útvonaltervező gomb, telefonon tesztelve. Az általunk épített oldalakon az integráció természetesen a csomag részeként jön.

kolozsvári csapat vagyunk, 100% távmunkában, Románia-szerte. Nem adunk el neked 30 000 tűs térképet, amire nincs szükséged — pontosan azt tesszük be, ami segít neked.

Szeretnéd látni, hogyan néz ki az oldaladon, ingyen? Írj nekünk WhatsApp-on a wa.me/40750257140 címen, és készítünk neked egy ingyenes demó oldalt — a térképpel és az útvonaltervező gombbal már helyesen beállítva.