Próbuję wstawić mapę Google do modalu za pomocą Twitter Bootstrap. Modal pojawia się z obecnym kształtem mapy, ale wyświetlana jest tylko część mapy, reszta jest szara. Po zmianie rozmiaru mapa zawsze pokazuje się poprawnie, chociaż jest wyśrodkowana w niewłaściwym miejscu.

Przeszukałem i znalazłem sugestie, takie jak wywołanie zdarzenia zmiany rozmiaru mapy lub ustawienie maksymalnej szerokości obrazu mapy na brak, ale żadna z tych sugestii nie pomogła do tej pory. Wygląda na to, że mapa nie jest w stanie określić prawidłowego rozmiaru, o ile jest w ukrytym elemencie.

JS

function 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>

Używam Twitter Bootstrap v2.0.4. Potrzebuję pomocy, ponieważ nie mogę poprawnie uruchomić zdarzenia zmiany rozmiaru lub edytować css, aby mapa Google została pozostawiona sama.