“Плохое” поведение яндекс карт

Когда контейнеру, содержащему яндекс-карты выставляю dislay: none карты при открытии кнопкой с помощью функции .slideToggle() остаются маленькими. На картинке видно, что остается маленьким ymap Я сделал костыль $('.faq__maps').hide(); и в принципе работает, но бывает все же не открывается, особенно при изменении размеров окна. В чем может быть проблема и как ее решить?

HTML

<button class='.address-button'>Показать на карте</button>
<div class='faq__maps'>
  <div id='map_1'></div>
</div>

SASS

.faq__maps 
  display:none

JS

$(document).ready(function () {
  // Открывает карту
  $('.address-button').click(function () {
      var time = 600;
      $('.faq__maps').slideToggle(time);
  });

$(window).on('load',function () {
//Всякий код...
    //Простой костыль, чтобы скрыть карты и они более менее нормально работали
    $('.faq__maps').hide();
});
//Начало кода карты
ymaps.ready(init);
var myMap1,
    myPlacemark1,
function init(){
    myMap1 = new ymaps.Map("map_1", {
    center: [координаты х, координаты у],
    zoom: 11
});
    myPlacemark1 = new ymaps.Placemark([координаты х, координаты у], {
    balloonContentHeader: 'Локация 1',
    balloonContent: 'Какой-то адресс',
});
    myMap1.geoObjects.add(myPlacemark1);
}//Конец кода карты