Изменить размер карты google в jQuery toggle div - проблема с отображением

Question

У меня есть небольшой div, отображающий карту google. При нажатии кнопки у меня расширяется панель div div - простой jQuery toggle.

Это прекрасно работает, но карта отображается некорректно, если вы переключились на большие размеры. Я использую

google.maps.event.addDomListener(window, 'resize', function() 

и

var currCenter = map.getCenter(); 

, чтобы обеспечить контейнер размер и повторное центрирование карты, но по какой-то причине он не работает.

Это создает проблему серых блоков и не центрирует.

Вот код Google Maps я использую:

function initMap() { 
     var mapDiv = document.getElementById('map'); 
     var map = new google.maps.Map(mapDiv, { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644) 
     }); 

     //Get current center 
     var currCenter = map.getCenter(); 

     //Use event listener for resize on window 
     google.maps.event.addDomListener(window, 'resize', function() { 
     //Set Center 
     map.setCenter(getCen); 
    }); 

Вот JSFiddle ссылку, чтобы увидеть то, что я получил до сих пор: https://jsfiddle.net/9ejvmn4q/

Answer 1

Это работает для меня, если я запускает событие изменения размера после запуска функции .toggleClass (требование заключается в том, что она запускается после изменения размера div, поэтому, если есть какая-либо анимация или асинхронная задержка, вам может понадобиться учитывать это).

Заметим также, что для mapresize и setCenter работать, то map и currCenter переменные должны быть в правильном объеме.

$(document).ready(function() { 
    $('.map-toggle').click(function(){ 
    $('.map').toggleClass('fullsize'); 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(currCenter); 
    }); 
}); 

updated fiddle

фрагмент кода:

$(document).ready(function() { 
 
    $('.map-toggle').click(function() { 
 
    $('.map').toggleClass('fullsize'); 
 
    google.maps.event.trigger(map, 'resize'); 
 
    map.setCenter(currCenter); 
 
    }); 
 
});

.clear { 
 
    clear: both; 
 
    display: block; 
 
    font-size: 0; 
 
    height: 0; 
 
    line-height: 0; 
 
    width: 100%; 
 
} 
 
#content { 
 
    width: 560px; 
 
} 
 
.map-section {} .map { 
 
    width: 140px; 
 
    height: 200px; 
 
    float: right; 
 
} 
 
.map.fullsize { 
 
    width: 100%; 
 
} 
 
.map-toggle {} .student-results-main { 
 
    float: left; 
 
    width: 390px; 
 
    background: #ddd; 
 
    min-height: 300px; 
 
} 
 
.student-results-sidebar { 
 
    float: right; 
 
    width: 140px; 
 
    background: #eee; 
 
    min-height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
 
<script> 
 
    var currCenter; 
 
    var map; 
 

 
    function initMap() { 
 
    var mapDiv = document.getElementById('map'); 
 
    map = new google.maps.Map(mapDiv, { 
 
     zoom: 8, 
 
     center: new google.maps.LatLng(-34.397, 150.644) 
 
    }); 
 

 
    //Get current center 
 
    currCenter = map.getCenter(); 
 

 
    //Use event listener for resize on window 
 
    google.maps.event.addDomListener(window, 'resize', function() { 
 
     //Set Center 
 
     map.setCenter(currCenter); 
 
    }); 
 
    } 
 
</script> 
 

 
<div id="content"> 
 
    <div class="map-section"> 
 
    <div id="map" class="map"></div> 
 
    </div> 
 

 

 
    <div class="student-results-main"></div> 
 

 
    <div class="student-results-sidebar"> 
 
    <button class="map-toggle">toggle</button> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div>