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); 
    }; 
});