Bootstrap手风琴中的谷歌地图

Question

我正在试图在Bootstrap手风琴中放置Google Map。

当我把地图<div id="mapcanvas">放入第二个手风琴时，当我打开第二个手风琴时，地图加载不正确。

$(document).ready(function() { 
    $('#map-acc a').click(function (e) { 
     e.preventDefault(); 
     $(this).collapse('show'); 
     resetMap(map); 
    }); 
}); 

function resetMap(m) { 
    x = m.getZoom(); alert('infunctin'); 
    c = m.getCenter(); 
    google.maps.event.trigger(m, 'resize'); 
    m.setZoom(x); 
    m.setCenter(c); 
};   

Codepen Link

我在做什么错？

Answer 1

见codepen

这JS代码会为你工作。 我创建了一个全球地图变量，因为在你的情况下，它是不可用，当你调用

reset(map); 

js代码

var map; 

function gmap() { 
    var mapOptions = { 
     zoom: 12, 
     center: new google.maps.LatLng(13.0827, 80.2707), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions); 
} 
google.maps.event.addDomListener(window, 'load', gmap); 

$(document).ready(function() { 
    $('#map-acc a').click(function (e) { 
     e.preventDefault(); 
     $(this).collapse('show'); 
     resetMap(map); 
     });   

    function resetMap(m) { 
     x = m.getZoom(); 
     c = m.getCenter(); 
     google.maps.event.trigger(m, 'resize'); 
     m.setZoom(x); 
     m.setCenter(c); 
    }; 
});