Добрый день
Ссылка - www.esencia.ru/test.php
Есть две вкладки - Москва и Санкт-Петербург.
На каждой вкладке отображается своя карта.
На каждой карте добавлен один балун.
При наведении на балун и нажатии на него отображается содержимое балуна.
На вкладке Мосвка, все работает отлично.
На вкладе Санкт-Петербург нажать на балун можно только в том случае если мышка наведена на самый правый край балуна, в ином случае на балун не нажать.
Поджскажите где ошибка.
Код страницы ниже:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init_msk);
var mapMSK;
function init_msk()
{
mapMSK = new ymaps.Map("#Y_MSK",
{
center: [55.75399400, 37.62209300],
zoom: 10
});
myPlacemarkM10 = new ymaps.Placemark([55.75399400, 37.62209300], {
iconContent: "Офис-магазин Москва",
balloonContent: '<b>Метро Пушкинская</b> <br/>Время работы: 9-21 с пн-вс, без выходных'
}, {
preset: "islands#redStretchyIcon"
});
mapMSK.geoObjects.add(myPlacemarkM10);
}
</script>
<script type="text/javascript">
ymaps.ready(init_spb);
var mapSPB;
function init_spb()
{
mapSPB = new ymaps.Map("#Y_SPB",
{
center: [59.947235, 30.337039],
zoom: 10
});
myPlacemarkS10 = new , и maps.Placemark([59.909702,30.316721], {
iconContent: "Офис-магазин",
balloonContent: '<b>Метро Фрунзенская или Технол. институт</b><br><b>Время работы: 9-21 с пн-вс, без выходных'
}, {
preset: "islands#redStretchyIcon"
});
mapSPB.geoObjects.add(myPlacemarkS10);
}
</script>
</head>
<body class="delivery">
<div>
<h1>Доставка и оплата</h1>
<div class="delivery-types">
<table class="regions">
<tbody>
<tr>
<td data-id="1" class="selected">
<div>Москва<span class="arrow"></span></div>
</td>
<td data-id="2">
<div>Санкт-Петербург<span class="arrow"></span></div>
</td>
</tr>
</tbody>
</table>
<div data-region="1" class="delivery" style="display: block;">
<div id="#Y_MSK" style="width: 600px;height: 450px"></div>
</div>
<div data-region="2" class="delivery" style="display: none;">
<div id="#Y_SPB" style="width: 600px;height: 450px"></div>
</div>
</div>
<style type="text/css">
body.delivery .delivery-types table.regions td{
list-style:none;
vertical-align: middle;
padding:5px 10px;
margin:0 2px 0 0;
width:152px;
height:40px;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
background:#e3e3e3;
font-size:14px;
cursor:pointer;
position:relative;
border-radius:12px 0 12px 0;
zoom:1;
position:relative;
}
body.delivery .delivery-types table.regions td.selected{
background:#959595;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('body.delivery table.regions td').click(function(){
if (!$(this).hasClass('selected'))
{
$('body.delivery table.regions td.selected').removeClass('selected');
$(this).addClass('selected');
region_id = $(this).attr('data-id');
$('body.delivery div.delivery').hide();
$('body.delivery div.delivery[data-region=
}
});
});
</script>
</div>
</body>
</html>
Заранее спасибо за ответ.