A Google térkép mint webhely háttere

Egy napon azt gondoltam, hogy "egy Google térképet telepítettem a webhelyem háttereként". Szükségem volt a szerencsémre a megoldások megtalálásában. Ezért úgy döntöttem, hogy a CSS-t használom és a z-indexet / abszolút értéket használtam. általában az elemek elhelyezése.

Majd elmagyarázom lépésről lépésre, amit tettem.

1. lépés - A Google Térkép API kulcsa:

A kulcsot nem nehéz elérni, csak meglátogattam a megfelelő oldalt, és létrehoztam a kódomat.

2. lépés - A CSS és a HTML konfigurálása:

Annak érdekében, hogy minden jól nézzen ki, az elemek abszolutizációját használjuk a hely helyes sorrendben és a képernyő méretének igazításához.

Amint látja, ennek a hatásnak a megszerzéséhez a "map_canvas" azonosítót (amely Google-térképet generál), az abszolút pozicionálás beépített stílusát állítom be. Fent, jobbra, balra, alul, - minden paraméter nullákkal, majd z-index 0-as hozzárendelve. Mindent a BODY-ban kell elhelyezni. és a legfrissebb elemet be kell illeszteni a záró BODY címke előtt.

Más DIV elemek az oldalon (a visszaszámlálás, szöveg, stb) hoztam létre egy tartályt DIV (#countdown_dashboard) és adta abszolút pozicionálás és állítsa be a z-index 100 (vagy a fenti, a legfontosabb dolog - nem 0).

Nyilvánvaló, hogy ez hasznos lehet, és ez csak a legegyszerűbb beállítás a Google térképen. A Google Térkép API lehetővé teszi, hogy egyéni címkéket helyezzen el a térképen oly módon, hogy hasznos legyen a vállalati kapcsolattartó oldal létrehozásával, irodák helyével stb.

Kapcsolódó cikkek