Google Maps als Hintergrund

Question

Gibt es einen sexy Weg, um eine Webseite mit Google Maps (im Vollbildmodus) zu bekommen, und nur einen kleinen div # Header auf der Oberseite und einen kleinen div # Container in der Mitte?

Ich hatte einige Nachforschungen angestellt und ich hatte dieses Beispiel gefunden: http://koti.mbnet.fi/ojalesa/exam/index.html ... aber das ist nicht genau das, was ich gerne tun würde.

Wenn Sie ein dünnes Codebeispiel eines netten Websitebeispiels haben, würde mir das sehr helfen.

Vielen Dank.

Answer 1

Sie können HTML-Elemente nach dem Zufallsprinzip auf eine (HTML-basierte) Google Map setzen, indem Sie position: absolute oder position: fixed verwenden. Sie müssen ihnen nur eine z-index höher als die eines Elements in der Google-Karte geben.

Ungeprüfte aber etwas in dieser Richtung arbeiten sollte:

<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

Wenn Sie die Iframe für Google Maps in einem div mit position: relative halten, und machen die div die gleichen Abmessungen wie die iframe, Sie dann position: absolute verwenden können auf andere Elemente innerhalb der relativ positionierten div, um sie wo Sie wollen auf dem GMap überlagern. Sie müssen möglicherweise mit der z-index CSS-Eigenschaft des Inhalts, den Sie über GMap positionieren möchten, basteln.

Answer 3

Hier ist eine nette Zuschreibung, wie es gemacht wird:

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