Fix a Google Maps container with zero height
A silent blank box with a clean console is nearly always CSS: the map initialised into an element with no height.
How to tell this is your problem
- No console error at all.
- Inspecting the map div shows height 0.
- The map appears if you resize the window or open a tab it lives in.
Why it happens
The Maps API sizes itself to its container. Percentage heights need a sized parent, and hidden tabs or accordions have no dimensions when the map initialises.
The fix, step by step
- 01Give the container an explicit height, for example min-height 360px.
- 02If using height 100%, make sure every ancestor has a height too.
- 03For tabs and accordions, call resize on the map when the panel becomes visible.
- 04Avoid initialising a map inside a display:none element.
Confirm it is fixed
Re-scan the page: the container should report a non-zero height and tiles should be present.
Check whether this is your error
A scan tells you in about twelve seconds, from a clean session.