0

ymaps.ready(init);
var myMap1,
    myMap2,
    myPlacemark1,
    myPlacemark2,
    myPlacemark3;

function init() {
    myMap1 = new ymaps.Map("map_1", {
        center: [45.04544779, 39.00158981],
        zoom: 11,
        controls: ['zoomControl']
    });
    
myPlacemark1 = new ymaps.Placemark([45.02388357, 39.06877350], {
    balloonContentHeader: 'Локация 1',
    balloonContent: 'ул. Сормовская, дом 12/11',
}, {
    iconLayout: 'default#image',
    iconImageClipRect: [[0, 0], [85, 124]],
    iconImageHref: 'img/label_map.png',
    iconImageSize: [33.33, 50],
    iconImageOffset: [-16.66, -50]
});
myPlacemark2 = new ymaps.Placemark([45.03811357, 39.02389400], {
    balloonContentHeader: 'Локация 2',
    balloonContent: 'ул. Школьная, дом 15/6'
}, {
    iconLayout: 'default#image',
    iconImageClipRect: [[85, 0], [170, 124]],
    iconImageHref: 'img/label_map.png',
    iconImageSize: [33.33, 50],
    iconImageOffset: [-16.66, -50]
});
myPlacemark3 = new ymaps.Placemark([45.05108607, 38.93185250], {
    balloonContentHeader: 'Локация 3',
    balloonContent: 'ул. 2-ая линия, дом 49'
}, {
    iconLayout: 'default#image',
    iconImageClipRect: [[170, 0], [255, 124]],
    iconImageHref: 'img/label_map.png',
    iconImageSize: [33.33, 50],
    iconImageOffset: [-16.66, -50]
});
    myMap1.geoObjects.add(myPlacemark1);
    myMap1.geoObjects.add(myPlacemark2);
    myMap1.geoObjects.add(myPlacemark3);

}
//Код кнопки
$('.address-button').click(function () {
    var time = 600;
    //Работает но не перерисовывает
    $('.faq__maps').slideToggle(time);
    //Не работает
//    $('.faq__maps').slideToggle(time, function() {
//       ymaps.myMap1.container.fitToViewport();
//    });
    //Не работает
//    $('.faq__maps').slideToggle(time, function() {
//       ymaps.myMap1.redraw();
//    });
    if ($(this).html() === 'Смотреть на карте') {
        $(this).html('Скрыть карту');
    } else {
        $(this).html('Смотреть на карте');
    }
});
.faq__maps{
height: 500px;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='address-button'>Скрыть карту</button>
<div class='faq__maps'>
   <div id='map_1' class='mymap'>
   </div>
</div>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

P.S. Пример, почему-то не загружает карту.

Подскажите функцию, на примере, как перерисовать карту? Дело в том, что контейнер карты скрывается функцией JQuery - .slideToggle() и когда изменяешь размеры окна, карта подстраивается под размер своего контейнера, а именно под 0. И когда открываешь, карты не видно. Проблема решаема, надо вызвать функцию перерисовки карты. Но ни один из найденных мною вариантов не работает. Я с картами на Вы и вероятно не понимаю синтаксис, помогите.

Пробовал так: ymaps.myMap1.container.fitToViewport(); Пробовал так: ymaps.myMap1.redraw();

Подключен скрипт

https://api-maps.yandex.ru/2.1/?lang=ru_RU

Ничего не работает. Помогите

1 ответ 1

1

Дело в том, что у Вас не выставлена высота div блока с картой. Добавьте её в стили и карта отобразится.

.mymap{
height:500px
}

Код для перерисовки карты должен быть таким:

$('.faq__maps').slideToggle(time, function() {
       myMap1.container.fitToViewport();
    });

Вот интерактивный пример.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.