如何在另一个div中设置地图到div？ [英] How to set a map to div within another div?
问题描述
我是javascript中的新手，我需要你的帮助，把谷歌地图设置为另一个div元素中的div元素。如果div元素不是嵌套的，这里的代码是有效的：
function initialize（）{
var myOptions = {
center：new google.maps.LatLng（-34.397,150.644），
zoom：8，
mapTypeId：google.maps.MapTypeId.ROADMAP
} ;
var map = new google.maps.Map（document.getElementById（map_canvas），
myOptions）;
但是，如果我嵌套div，它不起作用：
< body onload =initialize（）>
< div id =main>
< div id =map_canvasstyle =width：100％; height：100％>< / div>
< / div>
< / body>
我如何解决这个问题？
经过一些测试，我得出结论，你需要为你的 id =main div设置一个高度
style =width：100％; height：100％
因为它是地图的容器，并且没有定义的高度，所以不会出现。这就像滚下窗帘，地图不会自动推下去。
我假设你已经有类似的东西了，因为地图没有嵌套，但我会再提及它：
< style type =text / css>
html，body {height：100％}
< / style>
I am a newbie in javascript and I need your help on setting a google map to div element which is within another div element. Here's the code which works if the div elements aren't nested:
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
However if I have nested divs, it doesn't work:
<body onload="initialize()">
<div id="main">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
How do I solve this problem?
After a bit of testing, I concluded that you need to set a height to your id="main" div also
style="width:100%; height:100%"
Because it's a container to the map, and without a defined height nothing will appear. It's like rolling down a curtain, the map won't push it down by itself.
I'm assuming you have something similar already too since the map works without nesting, but I'll mention it again:
<style type="text/css">
html, body {height:100%}
</style>
这篇关于如何在另一个div中设置地图到div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
