Клуб API Карт

Проблема с показом интерактивной карты на сайте

xdepartment
11 декабря 2010, 13:26

Добрый день. Необходимо разместить интерактивную карту на сайте чтобы выглядела как прямоугольник с сглаженными округлыми краями.

Пытался реализовать таким образом: создал первый DIV присвоил ему z-index=2 в котором разместил таблицу C зелёной пустой ячейкой. На втором DIV (присвоил z-index=1) разместил карту. В итоге получилась карта с аккуратными сглаженными краями. Но при этом карта "перестала быть интерактивной", тоесть утратилась возможность увеличивать размер, перемещать метки и т.д. Думаю что это именно из-за z-index. Пожалуйста помогите реализовать отображение интерактивной карты под такой маской. Как действовать?

 

<!-- блок Карта. Начало. -->
                <div id="map_container">

<!-- блок таблицы (слой-маска) -->
                    <div id="layer1">
<table width="331" height="249" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="3">
            <img src=".."></td>
        <td>
           <img src=".."></td></td>
        <td rowspan="3">
            <img src=".."></td></td>
    </tr>
    <tr>
        <td>Пустая ячейка под карту</td>
    </tr>
    <tr>
        <td>
            <img src=".."></td></td>
    </tr>
</table>
                    </div>

<!-- cсама карта -->          

<div id="YMapsID"></div>
                </div>
<!-- Конец блока Карта. -->
#map_container {
z-index: 1;
position:relative;
height:249px;
width:331px;
}
#layer1 {
z-index: 2;
position:absolute;
top:0;
left:0;
}
#YMapsID {
z-index: 1;
vertical-align:bottom;
position:absolute;
top:40;
left:9;
width:300px;
height:190px;
}

2 комментария
Подписаться на комментарии к посту
Это больше не в этот клуб, а в клуб по HTML верстке.
То что карта перестала работать - это в принципе правильно.
Вы разместили над картой свой слой, который не "пропускает" события к карте.

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

Самое простое это отказаться от скругленных углов :)
Или можно сверстать по другому.
Вопрос в общем отношения к АПИ не имеет.

Создайте спрайт нужного цвета и с нужным радиусом скругления.
В родительский элемент контейнера карты добавьте 4 любых html-тега (например, )
Каждому пропишите свой класс, а в css файле страницы напишите стили, которые спозиционируют
эти элементы в углы контейнера и при этом покажут только 1/4 часть этого спрайта.
Как то так