Mostrando um mapa do Google em um modal criado com o Twitter Bootstrap
Estou tentando inserir um mapa do Google em um modal usando o Twitter Bootstrap. O modal aparece com a forma do mapa presente, mas apenas parte do mapa é exibida, o resto é cinza. Ao redimensionar a tela, o mapa sempre aparece corretamente, embora esteja centrado no lugar errado.
Pesquisei e encontrei sugestões, como chamar o evento de redimensionamento do mapa ou definir a largura máxima da imagem do mapa como nenhuma, mas nenhuma dessas sugestões ajudou até o momento. Parece que o mapa não está conseguindo descobrir o tamanho correto, desde que esteja em um elemento oculto.
JSfunction initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}
HTML<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3></h3>
</div>
<div class="modal-body">
<div id="mapCanvas" style="width: 500px; height: 400px"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
Estou usando o Twitter Bootstrap v2.0.4. Preciso de ajuda porque não estou conseguindo acionar corretamente o evento de redimensionamento ou editar o css para que o mapa do Google seja deixado em paz.