Google Maps Display:None Problem

by

I ran into this same problem today and eventually found this at the official Google Maps Javascript API V3 Reference:

Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, 'resize') .

As display:none is equivalent to leaving the <div> with size 0, changing it to display:block becomes in fact a change of size, making therefore necessary to trigger the map resize event.

Worked like a charm for me.

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. How do I create dynamic variable names inside a loop?
  2. Open infoWindows from an external link outside of the google map
  3. Google Place API – No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access [duplicate]
  4. Animating Multiple Markers
  5. Looping through Markers with Google Maps API v3 Problem
  6. Dynamically adding div on button click and changing Id of each?
  7. How to make page loaders/animations/transitions
  8. Get specific text from html tag jquery [duplicate]
  9. How to change the image while sharing the content to the social networks? [duplicate]
  10. How to distinguish between left and right mouse click with jQuery
  11. How to open a Bootstrap modal window using jQuery?
  12. How to build PDF file from binary string returned from a web-service using javascript
  13. jQuery get specific option tag text
  14. How do I add an “Add to Favorites” button or link on my website?
  15. Google Maps API V3 : How show the direction from a point A to point B (Blue line)?
  16. Run change event for select even when same option is reselected
  17. jQuery event delegation
  18. How to stop “setInterval” [duplicate]
  19. React JS onClick event handler
  20. jQuery Pagination Plugin
  21. stop settimeout in recursive function
  22. jQuery/Javascript to detect OS without a plugin?
  23. Jquery click event not firing on the element created dynamically using jquery
  24. Javascript / Jquery – Get number from string
  25. Click link inside Leaflet Popup and do Javascript
  26. Choppy/Laggy scroll event on Chrome and IE
  27. jQuery .on() method doesn’t see new elements
  28. Passing parameters to a JQuery function
  29. jQuery: Check if special characters exists in string
  30. Validate Dynamically Added Input fields

Leave a Comment