Карты Google в качестве фона

Question

Есть ли сексуальный способ получить веб-страницу с помощью Google Maps (в полноэкранном режиме), с небольшим заголовком div # сверху и небольшим контейнером div # посередине?

Я провел некоторое исследование и нашел этот пример: http://koti.mbnet.fi/ojalesa/exam/index.html ... но это не совсем то, что я хотел бы сделать.

Если у вас есть тонкий пример хорошего примера сайта, это мне очень поможет.

Большое спасибо.

Answer 1

Вы можете расположить элементы HTML в произвольном порядке поверх (на основе HTML) Карты Google, используя position: absolute или position: fixed.Вам просто нужно дать им z-index больше, чем у любого элемента на карте Google.

Не проверено, но что-то вроде этого должно работать:

<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

Вот хорошее описание того, как это делается:

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

Answer 3

Если вы удерживаете iframe для карт Google в div с position: relative и делаете div такими же размерами, что и в iframe, вы можете использовать position: absolute для других элементов в относительно позиционированном div наложить их, где вы хотите на GMap. Возможно, вам придется повозиться со свойством z-index css содержимого, которое вы хотите разместить над GMap.