Я пытаюсь вставить карту Google в модал с помощью Twitter Bootstrap. Модал отображается с формой существующей карты, но отображается только часть карты, остальная часть - серая. При изменении размера экрана карта всегда отображается правильно, хотя по центру не в том месте.

Я искал и нашел предложения, такие как вызов события изменения размера карты или установка максимальной ширины изображения карты на ноль, но ни одно из этих предложений до сих пор не помогло. Кажется, что карта не может определить ее правильный размер, если она находится в элементе, который скрыт.

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>

Я использую Twitter Bootstrap v2.0.4. Мне нужна помощь, потому что я не могу правильно запустить событие изменения размера или редактирую css, чтобы карта Google осталась одна.