Google Map in Bootstrap Accordion

Question

Я пытаюсь разместить карту Google в Аккордеоне Bootstrap.

Когда я положил карту <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); 

код

расслоения плотной

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