Div поверх gmap

Lakrein · October 19, 2011

Вобщем есть картинка, которую нужно разместить поверх гугл-карты. Z-index не помог.

Есть ли способ?

Привожу код страницы:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title>Гугокарты</title> 
 <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
 <script type="text/javascript">
 function initialize() {
 if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map")); 
 map.addControl(new GSmallMapControl()); // масштаб и перемещение карты
 map.addControl(new GMapTypeControl()); // переключение типов карты
 map.setCenter(new GLatLng(53.716228,23.812802), 15);
 }
 } 
 </script> 
 <style type="text/css">
#map{
	position: absolute;
	left: 7px;
	top: 6px;
	width: 535px;
	height: 232px;
}
#mapcont{
        /*z-index:1;—- Бордер поверх карты, но теряется функционал*/
	position:absolute;
	background:url("bordermap.png");
	width: 550px;
	height: 245px;
}
.qqq{
	position: relative;
}
 </style>
 </head> 
 <body  onload="initialize()" onunload="GUnload()"> 
 <div class="qqq">
 <div id="mapcont"></div>
  <div id="map" ></div>
  </div>
 </body>
 </html>

Заранее признателен.

Edited October 20, 2011 by Lakrein

zSpx · October 19, 2011

z-index работает только для позиционируемых элементов. Т.е. position != static. Если я все правильно понял, вам #mapcont нужно над #map повесить? Тогда оба этих элемента закиньте в контейнер, ему position: relative, вашим элементам absolute и #mapcont z-index больший, чем #map (ну и расположить его с помощью top, left, right, bottom так как вам нужно).

Undead_46 · October 19, 2011

поставте #mapcont position:relative вот и всё!, а z-index хватит и 1, так как по умолчанию он 0.

А лучше поставте #map z-index:1; а #mapcont z-index:2 ну с position: relative или absolute

Edited October 19, 2011 by Undead_46

Lakrein · October 19, 2011

спс. все ок.

Поторопился я... Если делать так, то гуглмап теряет возможность(перетаскивание, масштабирование и т.д.)

Edited October 19, 2011 by Lakrein

zSpx · October 19, 2011

поставте #mapcont position:relative вот и всё!, а z-index хватит и 1, так как по умолчанию он 0.

Во-первых, в таком случае z-index можно опустить вообще, а во вторых при relative позиционировании останется пустая область под/над картой, зачем? absolute нужен.

Поторопился я... Если делать так, то гуглмап теряет возможность(перетаскивание, масштабирование и т.д.)

Логично. Вы же наложили сверху элемент, который на себя принимает все клики и эффекты наведения мыши.

Lakrein · October 20, 2011

Неужели никто не сталкивался с подобной задачей? Требуется в принципе вот что

Вся проблема в закругленных углах. Или подскажите как скруглить углы для гуглмап(желательно кросбраузерно)

Изменил вышеприведенный код.

Edited October 20, 2011 by Lakrein

Undead_46 · October 20, 2011

Добавляешь div(родителем) к карте и скругляеш углы, можно картинками а можно CSS3.

на данный момент картинками лучше, но если их нет то можно через CSS3 а для IE6-IE8 CSSPIE

например

div{

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

background:#ccc;

border:1px solid #000;

padding:15px;

behavior: url(PIE.htc);//это для IE

}

нужно что бы PIE.htc был вместе с вашим css файлом, style.css.

И также в behavior нужно ввести абсолютный адресс для файла PIE.htc, например

у вас есть папка css, и в ней находится style.css и PIE.htc, значить адресс будет такой

behavior: url(css/PIE.htc);

Lakrein · October 20, 2011

Добавляешь div(родителем) к карте и скругляеш углы, можно картинками а можно CSS3.
на данный момент картинками лучше, но если их нет то можно через CSS3 а для IE6-IE8 CSSPIE

Работает ли скругление углов СSS3 С гуглмап? Проверил: c картинкой все ОК(углы скругляются как надо). Гуглмап никак не реагирует.

zSpx · October 20, 2011

имхо -webkit-border-radius:10px; можно выкинуть за ненадобностью. Доля 5 Сафари и так ничтожно мала, а про возможность существования 4 даже говорить не стоит, из-за агрессивной политики обновления Эппл. С Хромом проблем нет... и не будет. Спасибо Гугл. Остается ждать, когда вымрет 3.5 ФФ.

Lakrein · October 20, 2011

После долгих поисков и проб я пришел к выводу, что гуглмап всегда прямоугольной формы, скругление улов, а, тем более, расположение рамки поверх гуглмап не поможет.

Решил проблему подобрав более-менее подходящий фон рамки и уменьшил карту. Не идеально, но....

Если кто-то предложит рабочий вариант похожий на мой, буду признателен.

P.S. Всем спасибо за потраченное время.

zSpx · October 20, 2011

просто добавьте 4 элемента, разбросайте их по карте и задайте фоновое изображение скругленных уголков. на дропбоксе карты не заработали и картинки я жутко криво вырезал, но суть ясна.

Lakrein · October 20, 2011

просто добавьте 4 элемента, разбросайте их по карте и задайте фоновое изображение скругленных уголков. на дропбоксе карты не заработали и картинки я жутко криво вырезал, но суть ясна.

Отличное решение, спасибо.

Sign In

Div поверх gmap

Question

Link to comment

Share on other sites

11 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

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information