z-index и наложение элементов на Google map

k0sm0s · May 13, 2012

Прошу помощи более опытных товарищей в решении следующей проблемы. Код Google maps перекрывает все <div> и ни как не реагирует на изменения z-index.

Если утрировать есть следующая разметка:

</div>

При этом карта перекрывает все элементы, не действует и изменение z-index. Каким образом можно сделать, что бы log "залазило на карту"?

Буду очень благодарен за помощь.

ShumNo · May 13, 2012

А iframe есть возможность не использовать?

k0sm0s · May 13, 2012

А iframe есть возможность не использовать?

Google вроде выдает код для вставки именно в таком формате, я не нашел в интерфейсе как его поменять на какой-то другйо варинат к примеру с объектом вместо iframe. Если вы знаете как это можно сделать, буду рад узнать это.

ShumNo · May 13, 2012

Таки как раз наоборот

api на русском https://developers.google.com/maps/documentation/javascript/?hl=ru

Простой вывод карты


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Disabling Default UI</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

https://google-developers.appspot.com/maps/documentation/javascript/examples/control-disableUI?hl=ru

Там же сотни других примеров

Edited May 13, 2012 by ShumNo

k0sm0s · May 14, 2012

Огромное спасибо, за направление куда копать. Дальше уже сам разберусь.

k0sm0s · May 14, 2012

Прочитал все что там есть, и ни слова там нету о перекрытии. Пример приведенный вами тоже не работает. Ни какими способами ни z-index-ом, ни выравниваниями хитырми не получается расположить никакой внешний элемент поверх карты Google. Так что ссылка не очень помогла. И такой способ страивания карты тоже особых выгод не дал.

Таки как раз наоборот
api на русском https://developers.google.com/maps/documentation/javascript/?hl=ru
https://google-developers.appspot.com/maps/documentation/javascript/examples/control-disableUI?hl=ru
Там же сотни других примеров

k0sm0s · May 14, 2012

Единственный работающий варинат выглядит следующим образом:


<style>
   #wrapper { position: relative; }
   #over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
</style>

<div id="wrapper">
   <div id="google_map">

   </div>

   <div id="over_map">

   </div>
</div>

Но под него прийдется менять верску. Логотип прийдется переместить в не логичную часть документа. И как мне кажется такое решение не очень согласуется с использованием фреймворка 960.gs, стройная до того структура документа, явно нарушается.

ShumNo · May 14, 2012

Естественно в api гугл карт нет о верстке там только об api

У вас слой с картой в чем проблема перекрыть его чем хотите и как хотите? Лого отпозиционируйте и z-index'сом поместите выше карты

k0sm0s · May 15, 2012

Естественно в api гугл карт нет о верстке там только об api
У вас слой с картой в чем проблема перекрыть его чем хотите и как хотите? Лого отпозиционируйте и z-index'сом поместите выше карты

Проблема в том, что с картами не так просто их перекрыть чем угодно и как угодно. Суть впороса как раз и состояла в том, что стадартные подходы z-index-ами не подходили, так как карты постоянно "вылазили" на пердний план игнорируя указаные для них стили. Как оказалось при детальнои изучении вопроса в сети, пробелма известаная, и действительно не всегда удается расположить объекты над картами.

ShumNo · May 15, 2012

Вы такое хотели получить?

http://shumno.com/pub/maps.html

k0sm0s · May 15, 2012

Вы такое хотели получить?
http://shumno.com/pub/maps.html

Да именно такое. И в принципе уже получил. Но все равно спасибо за пример. Видимо я из-за неопытности в своей верске-то где-то докупистил ошибку, из-за которой подобная схема не работала.

Sign In

z-index и наложение элементов на Google map

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information