Showing a Google Map in a modal created with Twitter Bootstrap

Question

I\'m trying to insert a Google map into a modal using Twitter Bootstrap. The modal shows up with the shape of the map present, but only part of the map is displayed, the res

Answer 1

Showing the map correctly and centered

I wanted to point out a few modifications I made, based on the original answer, to make it work with Bootstrap 3 (check about modals usage).

// Resize map to show on a Bootstrap's modal
$('#map-modal').on('shown.bs.modal', function() {
  var currentCenter = map.getCenter();  // Get current center before resizing
  google.maps.event.trigger(map, "resize");
  map.setCenter(currentCenter); // Re-set previous center
});

In this case, I also take care of recentering the map, based on this question suggested in Jan-Henk's comment to the first answer.