Никак не получается произвести отображение карты в скрытом блоке, вот код который есть
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows 1251" />
<script src="http://api-maps.yandex.ru/2.0/?load=package.full& type="text/javascript"></script>lang=ru-RU"
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<style>
#footer{position:fixed; bottom:0; left:0; width:100%; height:50px;}
/* Subpages navigation */
#nav-pages{}
#nav-pages ul{margin:0; list-style:none; overflow:hidden;}
#nav-pages ul li{float:left; width:50%;}
#nav-pages ul li a{display:block; height:50px; line-height:50px; font-size:16px; color:#666;}
#nav-pages ul li a:hover{text-decoration:none;}
#nav-pages ul li a.active{background-color:#d0d0d0; color:#FF6600; text-decoration:none;}
#nav-pages ul li:first-child a{padding-right:190px; text-align:right;}
#nav-pages ul li:last-child a{padding-left:190px; text-align:left;}
/* Overlay */
#footer .overlay{position:absolute; bottom:100%; left:0; display:none; width:100%; background-color:#d0d0d0; z-index:1000; background:url(../images/opacity.png);}
/* Logos */
#logos{display:none; padding-top:15px; text-align:center;}
/* Contacts */
#contacts{display:none; padding:15px 0; text-align:center; font-size:14px;}
#contacts p{margin:0;}
</style>
<script type="text/javascript">
// ymaps.ready(init);
// Как только будет загружен API и готов DOM, выполняем инициализацию
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [55.72660851715817, 37.64685749999995],
zoom: 17
}),
//Создаем метку и задаем изображение для ее иконки
myPlacemark = new ymaps.Placemark([55.72660851715817, 37.64685749999995], {
balloonContent: ''
}, {
iconImageHref: 'images/marker.png', //картинка иконки
iconImageSize: [141, 85], //размеры картинки
iconImageOffset: [-25, -87] //смещение картинки
});
// Добавление метки на карту
myMap.geoObjects.add(myPlacemark);
// Создание экземпляра элемента управления
myMap.controls.add(
new ymaps.control.ZoomControl()
);
// Обращение к конструктору класса элемента
// управления по ключу
myMap.controls.add('typeSelector');
myMap.container.fitToViewport();
}
// Создание обработчика для события window.onLoad
// Как только будет загружен API и готов DOM, выполняем инициализацию
</script>
<link href="css/base.css" rel="stylesheet" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<!-- FOOTER -->
<footer id="footer">
<!-- Subpages navigation -->
<div id="nav-pages">
<ul>
<li><a href="#logos">Клиенты</a></li>
<li><a id="change" href="#contacts" onclick="YMaps.ready(init)">Контакты</a></li>
</ul>
</div>
<!-- /Subpages navigation -->
<!-- Overlay -->
<div class="overlay">
<div id="logos" class="inner"><img src="images/logos.png" width="816" height="245" alt="Logos" /></div>
<div id="contacts" class="inner">
<div id="map" style="width:600px;height:400px;"></div>
<p>Офис: Москва, 115114, 1-й Кожевнический пер., д. 10. Тел./факс: </p>
<p>Долгота: 37.646857°, широта: 55.726609°</p>
</div>
</div>
<!-- /Overlay -->
</footer>
<!-- /FOOTER -->
<script>
function lockFooter(){
$('#footer').unbind('mouseover');
$('#footer').unbind('mouseleave');
$('#nav-pages li > a').unbind('mouseover');
}
function unlockFooter(){
$('#nav-pages li > a').bind(
{
'mouseover' : function() {
$(this).parents('ul').find('.active').removeClass( 'active');
$('#footer .overlay .inner').hide();
$(this).addClass('active');
$('#footer .overlay').show();
$($('#nav-pages a.active').attr('href')).show();
},
'mouseleave' : function() {
}
}
);
$('#footer').bind(
{
'mouseover' : function() {
$('#footer .overlay').show();
$($('#nav-pages a.active').attr('href')).show();
YMaps.load(init);
},
'mouseleave' : function() {
$('#footer .overlay').hide();
$($('#nav-pages a.active').attr('href')).hide();
$('#nav-pages a.active').removeClass('active');
YMaps.load(init);
}
}
);
}
$(document).ready(function (){
unlockFooter();
});
</script>
</body>
</html>
Что мне надо сделать что бы накнец то все норм заработало?