A térképek minden üzleti weboldal nélkülözhetetlen szempontjai. Még ha teljesen internet-alapú is, az ügyfelek továbbra is szeretnék tudni, hogy ki vagy és hol él. A Google Maps mostantól sok webhely alapértelmezése, mivel a legegyszerűbben használható, látszólag a legpontosabb és ingyenes. Az oktatóanyag végére pontosan tudja, hogyan kell beágyazni egy reagáló Google Map-t webhelyére.
Az alapértelmezett Google Maps nem mindig reagál, ezért előfordulhat, hogy nem igazítja a képernyő méretét. Attól függően, hogy WordPress plugin-t használ, vagy magát beágyazza kóddal, lehet, hogy hozzá kell adnia néhány sor CSS-t, hogy a térkép érzékeny legyen.
Rugalmas webdesign
A reagálás kulcsfontosságú kifejezés itt. Leírja a webdizájnot, amely figyelembe veszi a felhasználói élményt és az eszközt annak biztosítása érdekében, hogy ugyanaz legyen, függetlenül attól, hogy milyen eszközt használ a webhelyhez. Például egy érzékeny webhelynek ugyanolyan minőségű tapasztalatokat kell nyújtania, ha asztali, táblagépen vagy okostelefonon látogatja meg.
Ehhez a weboldalnak alkalmazkodnia kell a különböző felbontásokhoz, képernyőméretekhez és az érintéshez.
Beágyaz egy reagáló Google Map-t egy weboldalra
Háromféle módon tudom beágyazni a Google Maps-t egy weboldalra. Ha WordPress témát használ, akkor lehet, hogy a szolgáltatás be van építve. Használhat plugint is, vagy kódot ágyazhat be közvetlenül a Google-ból bármely webhelyre. Az első és a második lehetőség nagyszerűen használható a WordPress felhasználók számára, más CMS pluginokat is használ, tehát magában foglalja őket. A végső lehetőségnek, a kód használatának, a legtöbb webhelyen működnie kell, függetlenül attól, hogy miként építették őket.
Használjon WordPress témát egy reagáló Google Map beágyazására
Egyes WordPress témáknak kifejezetten a Google Maps szolgáltatáshoz lesz jellemzői. Mivel a térképek olyan alapvető fontosságúak a modern weboldalak számára, egyes tématervezők ezeket közvetlenül a tervekbe építették be. Ha a témának van egy térkép funkciója, akkor valószínűleg szüksége lesz egy Google Maps API-ra, hogy működjön. Ön hozzáadja az API-t a témabeállításokhoz, és közvetlenül a Google-lal fog beszélni, hogy minden látogatáskor elkészítse a térképet.
- Látogasson el a Google webhely ezen oldalára az API-folyamat megkezdéséhez.
- Válassza ki a kék Start Start gombot.
- Válassza ki az új képernyő bal felső sarkában a három sor menüpontját.
- Válassza az API-kat és szolgáltatásokat, majd a hitelesítő adatokat.
- Válassza a Hitelesítő adatok létrehozása, majd az API-kulcs lehetőséget.
- Válassza a Korlátozás kulcsot, és válassza a HTTP hivatkozók lehetőséget.
- Válassza a Mentés lehetőséget.
- Másolja az API-kulcsot, és illessze be azt a tervezési beállítások oldalára, amelyre szüksége van.
Miután megszerezte az API-kulcsot, a téma-tervező eszközök segítségével beillesztheti a Google Map-ot a webhelyére. Mindaddig, amíg a téma reagál, a térképnek is meg kell lennie.
Használjon plugint egy reagáló Google Map beágyazására
A WordPress beépülő modulokat, a Joomla kiterjesztéseket, a Drupal modulokat vagy beépülőket használ, és más CMS hasonló elnevezési konvenciókat használ. Akárhogy is, a beépülő modulok olyan moduláris elemekre utalnak, amelyeket a CMS-hez csavarozhat a szolgáltatások hozzáadásához. Az egyik hasznos szolgáltatás a Google Map. Ha webhelyének témája nem tartalmaz térkép elemet, és nem akarja magának a kódot elkészíteni, akkor a plugin a következő legjobb dolog.
- A WordPress alkalmazásban keresse meg a Plugins and Add New elemet.
- Keresse meg a Google Maps alkalmazást, és válassza ki a kívánt megjelenésű beépülő modult.
- Engedélyezze a plugins-en belül, és lépjen a beállításaira.
- Adja hozzá a fent létrehozott Google Maps API-t, ahol meg van jelölve, és Mentés.
- Vigyázzon a bővítményre bárhol, ahol a térkép megjelenik.
Más CMS kissé különbözik elnevezésükben és menüpozíciójukban, de az elv nagyjából ugyanaz. A legtöbb, ha nem mindegyik térkép-beépülő modulhoz a Google Maps API működéséhez szükség van.
Használja a kódot egy reagáló Google Map beágyazására
Ha nem WordPress-t vagy más CMS-t használ, akkor továbbra is beágyazhat egy reagáló Google Map-t. Csak a kód helyett egy modult kell használnia. Kicsit több munkát igényel, de ugyanolyan érzékeny térképeket fog biztosítani.
- Keresse fel a Google Maps alkalmazást, és navigáljon, amíg a megjeleníteni kívánt térkép meg nem tölti a képernyőt.
- Válassza ki a kék megosztási hivatkozást, és másolja ki a kódot a Beágyazás térképből.
- Adja hozzá a saját beágyazási kódját az alábbi kód közé és.
- Adja hozzá a kódot annak a weboldalnak a HTML-kódjába, ahol meg szeretné tekinteni a térképet.
- Mentse el a változtatásokat.
A kód:
Ez nem az én kódom, online találtam, de kipróbáltam a webhelyemre. Úgy működik, mint egy varázsa, és akkor is működnie kell, ha CMS-t, HTML-t, Hugót, vagy a sok más weboldal nyelvét vagy oldal eszközét használja.
