Poner un mapa de Google Maps como fondo en una web

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Fondo Google Maps

Una idea para mostrar la ubicación de un punto en un mapa, por ejemplo: una tienda, una oficina, la ubicación de varias franquicias… es utilizar un mapa de Google Maps a tamaño completo como fondo de la página web. Además en la misma página podrás añadir: textos, imagenes y hasta botones de compartir en redes sociales.

A continuación tienes los pasos para poner un mapa de Google Maps como fondo de una web utilizando las propiedades de CSS como z-index y position: absolute:

  • El primer paso será obtener una una clave API para utilizar Google Maps, la clave se generará al momento y sólo es válida una por dominio.
    Para poder mostrar el mapa como fondo de nuestra web utilizaremos las propiedades absolute y z-index. Para obtener dicho efecto, le daremos al id map_ canvas (que será el que generará el mapa) algunos parámetros de estilo en forma inline, de la siguiente manera:

    <div id=”map_canvas” style=”position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0;”></div>

Nos fijaremos en que todas las propiedades queden configuradas en ‘0’ e indispensable que este sea el último elemento que añadamos antes de cerrar el tag body.

Para los demás elementos div que contenga la página, como pueden ser: textos, imagenes, cuenta regresiva, etc ha sido creado un div contenedor (llamado #countdown_dashboard) al que se le ha dado position : absolute y su z-index colocado en 100 o más alto en caso de ser necesario pero lo importante es que no sea cero.

  • Por último, recordar que la API de Google Maps nos permite personalizar el mapa de fondo añadiendo marcadores en diversos puntos para señalizar el mapa, etc.

Puedes ver un ejemplo del resultado final con un mapa como fondo en una web en wadehammes.com

Un comentario

  1. Víctor dijo:
    3 Diciembre, 2011
    Responder

    Me ha sido imposible encontrar las coordenadas…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.