Клуб API Карт

Отображение карты в скрытом блоке

subbotin.nik.wl
1 сентября 2012, 15:33

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows 1251" />
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
            <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. Тел./факс:  +7 (495) 980-70-66</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>
Что мне надо сделать что бы накнец то все норм заработало?
3 комментария
Подписаться на комментарии к посту

 

YMaps.load(init);

что это?

у вас в одном месте ymaps, в другом YMaps,  а javascript всё же case sensitive

 

Метод show принимает функцию обратного вызова, в которой вам надо вызвать myMap.container.fitToViewport();

Это кажись кусок кода от первого АПИ остался.