Aunque suene estéticamente extraño, lo cierto es que utilizar un mapa de Google Maps a gran escala como fondo de tu sitio web puede verse mejor de lo que crees. En este artÃculo te mostramos cómo utilizar propiedades de CSS como z-index y position: absolute para lograrlo.
Fuente original del artÃculo: WadeHammes
Traducción realizada por elWebmaster.com
Puedes ver un gran ejemplo del resultado final, visitando este enlace >>
1) Obten una clave de Google Maps API
Antes que nada, lo primero que requerirás será una clave API para utilizar Google Maps para estos fines. Esto te llevará tan solo unos segundos, es instantáneo y es requerida una clave por dominio.
Haz clic en este enlace para obtener tu clave API de Google Maps >>
2) Configura los archivos HTML y CSS
Aquà puedes descargar el archivo CSS:
Haz clic en este enlace para descargar el archivo CSS >>
Y aquà puedes descargar el archivo HTML:
Haz clic aquà para descargar el archivo HTML >>
Finalmente, aquà tienes el archivo JavaScript:
Haz clic aquà para descargar el archivo JavaScript >>
Para que todo funcione correctamente, usaremos las propiedades absolute y z-index para poder alinear y posicionar todo en el orden correcto para completar la pantalla.
Como podrás ver, para obtener este efecto, le daremos al id map_ canvas que será el que generará el mapa) algunos parametros de estilo en forma inline, de esta manera:
- <div id="map_canvas" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;"></div>
Es importante que todas estas propiedades queden configuradas en cero, y es indispensable que este sea el último elemento que coloquemos antes de cerrar el tag body.
Para los otros elementos div en la página (como la cuenta regresiva, el texto, etc…) fue creado un div contenedor (llamado #countdown_dashboard) al que le fue dada position : absolute y su z-index fue colocado en 100 (o más alto si quieres ¡Lo importante que es no sea cero!)
Puedes encontrarle muchas utilidades a este truco… Ten en cuenta que el API de Google Maps te permitirá colocar marcadores en puntos personalizados del mapa , por lo que puede ser una gran idea a la hora de crear una página de contacto, mostrar la ubicación de todos los comercios de una franquicia, etc.
¡Hasta la próxima!
Fuente original del artÃculo: WadeHammes
Traducción realizada por elWebmaster.com
Lunes, 28 de marzo de 2011 a las 08.39
Nunca se me habia ocurrido utilizar la api de google para algo asi!! Muy ingenioso
Lunes, 28 de marzo de 2011 a las 10.37
Espectacular, realmente ingenioso y creativo.
Martes, 29 de marzo de 2011 a las 03.19
Primero felicidades por el sitio, soy un graaan fan!
Solamente un detalle, la clave API solamente se usaba para la v2 de GMaps API (la cual ya está obsoleta), para la versión 3 que es la actual, no es necesario que obtengas una clave API, solamente con colocar el código de inclusión de Javascript de GMaps API obtienes acceso a toda la API. No he revisado el código, pero igual si se desarrolló para usar funciones de la v2 quizá si sea necesario seguir obteniendo la clave =P
Miércoles, 30 de marzo de 2011 a las 00.54
excelentes tips para los que como yo , apenas estamos despuntando.gracias
Jueves, 31 de marzo de 2011 a las 18.21
Me parece super ingenioso, pero todavia lo estoy tratando de poner en mi pagina
Gracias…
Viernes, 1 de abril de 2011 a las 02.19
Agradecerte por el aporter, siempre tuve dudas de como usar como fondo las imagenes de google maps. y porfin pude hacerlo, honestamente recien estoy empezando en esto del desarrollo web. EL sitio que creaste es muy bueno, ya estare revisando los talleres practicos que publicastes. Saludos.
PD: ubicar el lugar donde vivo y ponerlo en coordenadas para ser traducidos por el API de google me tomo un tiempo, pero segui intentanto hasta poder lograrlo, de nuevo muchas gracias.
Lunes, 11 de abril de 2011 a las 10.40
[…] Como podrás ver, para obtener este efecto, le daremos al id map_ canvas que será el que generará el mapa) algunos parametros de estilo en forma inline, de esta manera: PLAIN TEXT […]