Estoy tratando de insertar un mapa de Google en un modal usando Twitter Bootstrap. El modo se muestra con la forma del mapa presente, pero solo se muestra una parte del mapa, el resto es gris. Al redimensionar la pantalla, el mapa siempre se muestra correctamente, aunque centrado en el lugar equivocado.

Busqué y encontré sugerencias como llamar al evento de cambio de tamaño del mapa o establecer el ancho máximo de la imagen del mapa en ninguno, pero ninguna de estas sugerencias ha ayudado hasta ahora. Parece que el mapa no logra averiguar cuál es el tamaño correcto siempre que esté en un elemento oculto.

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>

Estoy usando Twitter Bootstrap v2.0.4. Necesito ayuda porque no logro activar correctamente el evento de cambio de tamaño o edito el css para que el mapa de Google quede solo.