Harta Google ca fundal de site

Într-o zi, am avut ideea de a "instala o hartă Google ca fundal al site-ului meu", am avut nevoie de norocul meu în găsirea de soluții. Așa că am decis să folosesc CSS și să folosesc z-index / absolute.





în general, poziționarea elementelor.

Voi explica pas cu pas ceea ce am făcut.

Pasul 1 - Am primit cheia API Google Maps:

Cheia nu a fost dificil de obținut, tocmai am vizitat pagina corespunzătoare și mi-am creat codul.

Pasul 2 - Configurați CSS și HTML:

Pentru ca totul să arate corect, vom folosi absolutizarea elementelor pentru a alinia poziția în ordinea corectă și în dimensiunea ecranului.







După cum puteți vedea, pentru a obține acest efect, am setat ID-ul "map_canvas" (care generează o hartă Google), stilul încorporat de poziționare absolută. Mai sus, dreapta, stânga, partea inferioară, - toți parametrii după zerouri, apoi z-indexul atribuit 0. Este necesar să poziționați totul în BODY. iar elementul cel mai recent trebuie introdus înainte de eticheta BODY de închidere.

Pentru alte elemente DIV din pagină (numărătoarea inversă, text etc.), am creat containerul DIV (#countdown_dashboard) și i-am dat o poziționare absolută și am setat z-index 100 (sau mai mare, principalul lucru nu este 0).

Evident, acest lucru poate fi util, iar acesta este doar setările cele mai de bază de pe harta Google. Google Maps API vă va permite să plasați etichete personalizate pe hartă astfel încât să poată fi utile când creați o pagină de contact a companiei cu locația birourilor etc.







Articole similare

Trimiteți-le prietenilor: