Categorías destacadas
Artículo
|
Coloca un mapa de Google Maps como imagen de fondo de tu web |
Google Maps, se ha convertido en un elemento prácticamente imprescindible en nuestras aplicaciones webs, para que todos nuestros usuarios puedan saber donde nos encontramos. Pero que pensaríais si os damos la opción de ponerlo como fondo de nuestra web.
Para lograr hacer esto, debemos de jugar con algunas propiedades de hojas de estilos, como son z-index o position: absolute.
Lo primero que debemos de hacer, es obtener el API Key de Google Maps. Para ello debemos de hacer clic en el siguiente enlace y cumplimentar lo que nos pida. Se tarda muy poco.
Lo siguiente que debemos de hacer, es configurar los archivos HTML y CSS de nuestro sitio, para lograr nuestro objetivo.
Como ya hemos indicado, debemos de hacer uso de la propiedad z-index y absolute, para poder alinear y posicionar todo de forma correcta.
Nos podemos descargar el documento html desde el siguiente enlace.
Como puede ver, con el fin de conseguir este efecto, al id "map_canvas" (que genera el mapa de google - ver el archivo JSMapa aquí) le asignamos el estilo en línea de la posición absoluta con su superior/ derecha / izquierda / abajo todos los parámetros establece en 0 y luego también el z-index a 0. Es necesario colocarlo en el elemento BODY como el último elemento antes de la etiqueta.
El documento CSS lo puedes ver aquí.
Para los otros elementos DIV de la página, hemos creado el contenedor #countdown_dashboard, y le hemos dado posición absoluta y el valor de 100 a la propiedad z-index.
De esta forma tan sencilla, podemos colocar nuestro mapa como fondo en nuestra aplicación.
Vía: Wadehammes
Para lograr hacer esto, debemos de jugar con algunas propiedades de hojas de estilos, como son z-index o position: absolute.
Lo primero que debemos de hacer, es obtener el API Key de Google Maps. Para ello debemos de hacer clic en el siguiente enlace y cumplimentar lo que nos pida. Se tarda muy poco.
Lo siguiente que debemos de hacer, es configurar los archivos HTML y CSS de nuestro sitio, para lograr nuestro objetivo.
Como ya hemos indicado, debemos de hacer uso de la propiedad z-index y absolute, para poder alinear y posicionar todo de forma correcta.
Nos podemos descargar el documento html desde el siguiente enlace.
Como puede ver, con el fin de conseguir este efecto, al id "map_canvas" (que genera el mapa de google - ver el archivo JSMapa aquí) le asignamos el estilo en línea de la posición absoluta con su superior/ derecha / izquierda / abajo todos los parámetros establece en 0 y luego también el z-index a 0. Es necesario colocarlo en el elemento BODY como el último elemento antes de la etiqueta.
El documento CSS lo puedes ver aquí.
Para los otros elementos DIV de la página, hemos creado el contenedor #countdown_dashboard, y le hemos dado posición absoluta y el valor de 100 a la propiedad z-index.
De esta forma tan sencilla, podemos colocar nuestro mapa como fondo en nuestra aplicación.
Vía: Wadehammes
 |
Publicado por: Administrador |
|
|
Comentarios
Últimas noticias
Últimos artículos
