javascript - Google Maps V3, Map won't display when wrapped in a second div

Question

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I am a newbie to Google Maps. I have started with their "Hello World" code, which has the following:

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>

which of course works fine. But, if I want to wrap their div in another div (so I can set various container styles), the map doesn't display at all:

<body onload="initialize()">
<div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T21:33:47+0000

Apply width and height to div:

<div style="width:100%; height:100%;">
   <div id="map_canvas" style="width:100%; height:100%"></div>
</div>

Inner div's ( id="map_canvas" div ) sizes are set by percents. This means inner div will be fit to its parent sizes.