Google Maps como fondo

Question

¿Hay una manera atractiva de obtener una página web con Google Maps (en pantalla completa), y solo un pequeño encabezado div # en la parte superior y un pequeño contenedor div # en el medio?

Hice algunas investigaciones y encontré este ejemplo: http://koti.mbnet.fi/ojalesa/exam/index.html ... pero esto no es exactamente lo que me gustaría hacer.

Si tiene un ejemplo de código delgado de un buen ejemplo de sitio web, esto me ayudaría mucho.

Muchas gracias.

Answer 1

Puede colocar elementos HTML aleatoriamente sobre un mapa de Google (basado en HTML) usando position: absolute o position: fixed. Solo necesita darles un z-index más alto que el de cualquier elemento en el mapa de Google.

no probado, pero algo en este sentido debería funcionar:

<style type="text/css"> 
    .Overlay { position: absolute; left: 0px; top: 0px; 
      right: 0px; height: 50px; background-color: white; z-index: 100 } 
</style> 

... Fullscreen Google Map (or whatever)..... 

<div class="Overlay">I'm on top of a Google Map!</div> 

Answer 2

Si mantiene el iframe para los mapas de Google en un div con position: relative, y hacer los div las mismas dimensiones que el iframe, a continuación, puede utilizar position: absolute en otros elementos dentro del relativamente posicionado div para superponerlos donde desee en el GMap. Es posible que necesite retocar con la propiedadcss del contenido que desea colocar sobre GMap.

Answer 3

He aquí una buena valoración crítica de cómo se hace:

http://blog.wadehammes.com/post/3837158298