Showing a Google Map in a modal created with Twitter Bootstrap

by

Google Maps indeed displays “Grey” area’s when it’s placed inside a dynamic element (for example: One that resizes, fades etc.). You’re right about triggering the “resize” function, which should be called once the animation is complete (the shown.bs.modal event in Bootstrap 3 or the shown event in Bootstrap 2):

$("#myModal").on("shown.bs.modal", function () {
    google.maps.event.trigger(map, "resize");
});

In Bootstrap 2, you will do:

$('#myModal').on('shown', function () {
    google.maps.event.trigger(map, "resize");
});

(where map is the variable name of your map (see Google Maps documentation for further details), and #myModal the ID from your element).

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

When the map is resized, the map center is fixed

  • The full-screen control now preserves center.

  • There is no longer any need to trigger the resize event manually.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); doesn’t have any effect starting from version 3.32

More Related Contents:

  1. Twitter Bootstrap CSS affecting Google Maps
  2. Multiple modals overlay
  3. Add “Search Area” outline onto google maps result
  4. Bootstrap 3 with remote Modal
  5. Google Maps API V3 Infobox.js removed
  6. What parameters should I use in a Google Maps URL to go to a lat-lon?
  7. Bootstrap: Open Another Modal in Modal
  8. This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console
  9. Google Maps V3: Draw German State Polygons?
  10. Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape? [duplicate]
  11. What steps should I take to protect my Google Maps API Key?
  12. Find center of multiple locations in Google Maps
  13. Using initMap and initAutocomplete on same html page google maps
  14. Googlemaps API Key for Localhost
  15. How to offset the center of a Google maps (API v3) in pixels?
  16. How can I place a html div over the Google Earth plugin? Involves wmode, I imagine
  17. how to destroy bootstrap modal window completely?
  18. Flutter: How to add marker to Google Maps with new Marker API?
  19. Recieving a 403 forbidden error when using latitude and longitude: geocoding
  20. Google Maps API V3 : weird UI display glitches (with screenshot)
  21. How to change the icon size of Google Maps marker in Flutter?
  22. Leaflet map not showing properly in bootstrap 3.0 modal
  23. Paging on Google Places API returns status INVALID_REQUEST
  24. Google Maps API – Get Coordinates of address
  25. Autofocus input in twitter bootstrap modal
  26. Google Maps API 3 fitBounds padding – ensure markers are not obscured by overlaid controls
  27. How long do the new Places API session tokens last?
  28. Do not change map center or zoom level when rendering directions
  29. Box/Rectangle Draw Selection in Google Maps
  30. Google map driving direction source code for their example?

Leave a Comment