Question

今天我开始在我的网站上实施谷歌地图，但是我遇到了一个问题，因为为我提供地图的div不能放入另一个div？！

我使用this site上所述的代码，当我执行类似

的操作时

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

它停止工作。为什么？我不希望我的地图显示在整个页面上，我希望它显示在一个普通的div中，我可以随时随地重复...

Answer 1

像这样更改样式表：

<style type="text/css">
  #map_canvas { width : 500px; height : 500px; }
</style>

还可以从div标签中删除内联样式表。

<div id="map_canvas"></div>

Answer 2

您可以设置div map_canvas的样式。它不需要放入另一个div来做到这一点。

例如，将代码更改为：

     <div id="map_canvas"></div>

和CSS：

#map_canvas{
    width:400px; /* your own height here */
    height:300px;  /* your own height here */
     border:solid 1px green;  /* your own border if you like */

    /* maybe you want to position it somewhere? you can do for example */
   position:absolute; top:50px; left:50px; 

 }

<强>更新

显然你需要设置宽度和宽度。父DIVS上的身高也是如此。我还没有测试过这个，但尝试以下方法：

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


#mapHolder {width:100%; height:100%;}

如果不这样做，你是否尝试过绝对大小，而不是我在这个答案顶部的CSS中的％？

Answer 3

您可以通过更改宽度和高度值来重新调整地图大小。所以

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

Answer 4

现在你有

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

这不应该有效，因为您的父div没有width和height。当您在width/height中使用%时，该元素会根据其父元素来衡量维度。如果您对父element/div应用了一些宽度和高度，即

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

然后内部div（map_canvas）将宽度和高度应用于100%的自身300px。或者，您可以删除外部div。希望它有所帮助。

另一个div中的Google Maps API div

4 个答案: