Hogyan adj térképet az appodhoz: beágyazások, interaktív térképek és üzletkeresők

Térkép hozzáadásához először döntsd el, hogy statikus beágyazásra (egy hely jelölővel, például „itt találod a boltunkat”) vagy interaktív térképre (sok jelölő az adataidból, szűrők, csoportosítás, „a közelben”) van-e szükséged. Egyetlen helynél a beágyazott térkép a leggyorsabb, és a Google Maps Embed API-val ingyenes. Interaktív térképhez használj JavaScript-térképkönyvtárat – Google Maps JavaScript API-t, Mapbox GL JS-t vagy a nyílt forráskódú Leaflet-et csempeszolgáltatóval –, tárold minden hely szélességi és hosszúsági fokát az adatbázisodban, és korlátozd az API-kulcsodat a saját domainedre. Az alábbi szolgáltatói részletek az egyes szolgáltatók saját dokumentációja alapján, 2026 szeptemberi állapot szerint szerepelnek.

Milyen térképre van szükséged?

A legtöbb kisvállalkozási oldalnak csak az első sor kell. A könyvtáraknak, piactereknek és hirdetési oldalaknak a harmadik és a negyedik.

A lehetőségeid

Google Maps Platform

A Google kezdő útmutatója szerint egy számlázással engedélyezett Cloud-projektet kell létrehozni, és engedélyezni a kívánt API-kat. A pay-as-you-go árazás Essentials SKU-kat ad, köztük a Dynamic Mapset, havi 10 000 eseményes ingyenes kerettel, a Dynamic Maps díja pedig e fölött 1000 eseményenként 7,00 dollár (az első árszintnél). A Maps Embed SKU korlátlan és ingyenes. A Google havi előfizetéses csomagokat is kínál. Az aktuális számokért nézd meg a Google Maps Platform árazást.

Mapbox

A Mapbox árazási oldala webes Mapbox GL JS-re havi 50 000 ingyenes térképbetöltést ír, utána 1000-enként 5,00 dollárt. Lásd: Mapbox árazás.

Leaflet és OpenStreetMap

A Leaflet magát nyílt forráskódú JavaScript-könyvtárként írja le mobilbarát interaktív térképekhez, kb. 42 KB JavaScripttel. Térképcsempékre (a térkép képeire) van szüksége valahonnan. Az OpenStreetMap nyilvános csempeszerverei csábítóak, de a csempehasználati szabályzat látható forrásmegjelölést ír elő, tiltja a tömeges letöltést, nem ad szolgáltatási garanciát, és figyelmeztet, hogy a kereskedelmi szolgáltatásoknál a hozzáférés megszüntethető. Valódi terméknél használj kereskedelmi vagy saját hosztolású csempeforrást, amely működik a Leaflet-tel.

API-kulcsok: nyilvánosak, de korlátozottak

A böngészőben használt térképkulcsok bárki számára láthatók, aki megnyitja az oldalad. Ez várható, de azt jelenti, hogy valaki lemásolhatja a kulcsodat, és a te számládra futtathat használatot. A Google biztonsági útmutatója szerint adj hozzá weboldal- (HTTP referrer) korlátozásokat, amelyek felsorolják a domainjeidet, és API-korlátozásokat, hogy a kulcs csak a használt API-kkal működjön.

A szerveroldali szolgáltatások kulcsait – például több ezer cím geokódolásához – külön kulcsként kezeld, és szerveroldali titokként tartsd, ne az oldalon. Állíts be a szolgáltató konzolján költségkeretet vagy riasztást, hogy egy hiba ne okozhasson nagy számlát.

Geokódolás: a címek koordinátákká alakítása egyszer

A térképek szélességi és hosszúsági fokot ábrázolnak, nem címeket. A cím koordinátává alakítását geokódolásnak hívják, és a legtöbb szolgáltató kérésenként számol érte. A hatékony minta:

1. Amikor egy hirdetés mentésre kerül, geokódold a címét a szerveren.
2. Tárold a szélességi és hosszúsági fokot az adatbázisban.
3. A térkép a tárolt koordinátákat olvassa; oldalmegtekintéskor soha nem geokódol.

Ellenőrizd minden szolgáltató feltételeit arról, meddig tárolhatod a geokódolási eredményeket; ezek eltérnek.

Példa promptok

Egy beágyazott térkép:

A Kapcsolat oldalon adj egy beágyazott Google-térképet, amely a címünket mutatja (12 High Street, Leeds), a Maps Embed API-val, a kulcsot a GOOGLE_MAPS_EMBED_KEY-ben tárolva. Alatta adj egy „Útvonal” linket. Telefonon legyen teljes szélességű, és lazy-load betöltéssel.

Hirdetések interaktív térképe:

Adj szélességi és hosszúsági fokot a hirdetések táblájához. Amikor egy hirdetés létrejön, vagy a címe megváltozik, geokódold a szerveren a GEOCODING_API_KEY-ben tárolt kulccsal, és mentsd el a koordinátákat. A Böngészés oldalon mutass egy térképet hirdetésenként egy jelölővel, Leaflet-tel, és csoportosítsd a jelölőket, haz átfedik egymást. Jelölőre kattintva jelenjen meg a cím, az ár és egy link. A térkép és a lista ugyanazokat a szűrőket használja.

„A közelben”:

Adj egy „A közelben” gombot, amely kéri a látogató helyzetét, és a 10 km-en belüli hirdetéseket mutatja, távolság szerint rendezve. Ha nem engedélyezik a helyhozzáférést, engedd, hogy egy várost írjanak be.

Lépésről lépésre

1. Válaszd ki a térképtípust a tábla alapján, az elején.
2. Hozd létre a szolgáltatói fiókot és egy projektet, és csak a szükséges API-kat engedélyezd.
3. Hozz létre kulcsokat: egy böngészős kulcsot, amely a domainjeidre van korlátozva (az építés alatt az előnézeti domainedet is beleértve), és ha szükséges, egy szerveroldali kulcsot a geokódoláshoz.
4. Tárold a kulcsokat titokként, és kérd az építődet, hogy használja őket; a böngészős kulcs attól még korlátozott marad, hogy az oldalba kerül.
5. Tárold a koordinátákat minden helyhez az adatbázisodban.
6. Építsd meg a térképet: jelölők, felugró ablakok, csoportosítás és ésszerű alapértelmezett nagyítás.
7. Párosítsd listával. Egy térkép önmagában nehezen használható telefonon és képernyőolvasóknak. Mutasd ugyanazokat az eredményeket listaként is.
8. Állíts be költségkeret-riasztást a szolgáltató konzolján.
9. Publikálj és teszteld az éles domainen, mert a referrer-korlátozások gyakran blokkolják a térképet, amíg az éles domain nincs hozzáadva.

Gyakori hibák

• Korlátozatlan kulcsok. Bárki újrahasználhatja őket a saját oldalán.
• Geokódolás minden oldalmegtekintésnél. Lassú és drága; mentéskor geokódolj egyszer.
• Az éles domain elfelejtése a kulcs-korlátozásoknál. Előnézetben működik, éles üzemben üres szürke doboz.
• Csak térképes elrendezések. A jelölők lista nélkül kellemetlenek kis képernyőn, és nem akadálymentesek.
• Száz jelölő csoportosítás nélkül. Olvashatatlan és lassú.
• Hiányzó forrásmegjelölés. A legtöbb térkép- és csempeszolgáltató megköveteli, elrejtése megszegi a feltételeit.
• Helyhozzáférés kérése oldalbetöltéskor. Csak akkor kérd, amikor a felhasználó megnyomja az „A közelben” gombot.

Ellenőrzőlista

• A feladathoz megfelelő térképtípus van kiválasztva
• A böngészős kulcs a domainjeidre és a szükséges API-kra van korlátozva
• A szerveroldali kulcsok titkokban vannak
• A koordináták az adatbázisban vannak tárolva, egyszer geokódolva
• Az eredmények listaként is megjelennek
• Sok jelölő esetén csoportosítás
• A forrásmegjelölés látható
• A szolgáltatónál költségkeret-riasztás van beállítva
• Az éles domainen és telefonon tesztelve

Térképek hozzáadása a Mythexszel

A Mythexnek nincs beépített térképintegrációja; a saját szolgáltatói kulcsodat hozod, projekttitokként adod hozzá (vagy beilleszted, amikor az ügynök titok-kártyát mutat), és a chatben kéred a térképet, ahogy az Integrate any API leírja. A koordináták a projekt adatbázisába kerülnek. Ne felejtsd el az előnézeti és a publikált domainedet is hozzáadni a kulcs weboldal-korlátozásaihoz, és titokváltoztatás után publikálj újra.

A térképek általában a keresés és a hirdetések mellett állnak: lásd hogyan adj keresést az appodhoz, hogyan építs könyvtári weboldalt és hogyan építs kisvállalkozási weboldalt.

Kérdések