Morton 27 de marzo de 2011 a las 11.17
   Imprimir artículo
elWebmaster.com

Cómo colocar un mapa de Google Maps como fondo de tu sitio web


mapsbackground-wide2Aunque 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 >>

mapsbackground

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:

  1. <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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (7)

  1. Persimón dice:

    Nunca se me habia ocurrido utilizar la api de google para algo asi!! Muy ingenioso :)

  2. Gizart dice:

    Espectacular, realmente ingenioso y creativo. :-)

  3. Alex Franco dice:

    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

  4. RAUL PRIEGO dice:

    excelentes tips para los que como yo , apenas estamos despuntando.gracias

  5. Fabian Vi√Īansaca dice:

    Me parece super ingenioso, pero todavia lo estoy tratando de poner en mi pagina
    Gracias…

  6. Manuel Antonio dice:

    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.

  7. C√≥mo colocar un mapa de Google Maps como fondo de tu sitio web « ITecnoSolution dice:

    […] 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 […]

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder