Showing Google Map inside a Bootstrap modal window

If you try to add a Google Map inside a Bootstrap modal window you will get some strange behaviors. This is because you need to trigger a resize event on the map when the div changes size (take a look at the Google Maps docs).

We already have seen how to add a Google Map using API 3 (without any plugins). Now, to get a well working map inside a Bootstrap modal window we only need to add this snippet at the bottom of initializeMap function:

Javascript (and Coffeescript)

  initializeMap = function(id) {

    ...

    // When modal window is open, this script resizes the map and resets the map center
    $("#modalWindowId").on("shown.bs.modal", function(e) {
      google.maps.event.trigger(map, "resize");
      return map.setCenter(markerLatLng);
    });
  }

  initializeMap = ->

    ...

    # When modal window is open, this script resizes the map and resets the map center
    $("#modalWindowId").on "shown.bs.modal", (e) ->
      google.maps.event.trigger map, "resize"
      map.setCenter(markerLatLng);

shown.bs.modal is a Bootstrap event that check when the modal is open (check out the Events section of Boostrap modal docs for more info)