Google地图在div内不起作用 [英] Google Maps doesn't work when inside a div
问题描述
我正在尝试使用Google Maps API，并且只有在不包含另一个div的情况下，才会包含地图。我用两个地图创建了一些示例代码，第一个作品第二个作品没有。如果我删除这段代码的文档类型，这两个工作。任何想法为什么？
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta content ='application / xhtml + xml; charset = UTF-8'http-equiv ='content-type'/>
< style type ='text / css'>
html {height：100％}
body {height：100％; margin：0px; padding：0px}
#map_canvas {height：50％}
＃map_canvas2 {height：50％}
< / style>
< title>地图< /标题>
< script src ='http：//maps.google.com/maps/api/js？sensor = false'type ='text / javascript'>< / script>
< script type ='text / javascript'>
函数initialize（）{
var latlng = new google.maps.LatLng（20，20）;
var myOptions = {
zoom：8，
center：latlng，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），myOptions）;
var map2 = new google.maps.Map（document.getElementById（map_canvas2），myOptions）;
}
< / script>
< / head>
< body onload ='initialize（）'>
< div id ='map_canvas'>< / div>
< div>
< div id ='map_canvas2'>< / div>
< / div>
< / body>
< / html>
这就是它在Firefox和Chrome中的样子：
它确实有效，如果你检查萤火虫页面，你会看到地图正在被创建。但是因为您没有将CSS定位应用于外部div，所以由Google地图创建的地图div位于第一个map_canvas下方。
您需要定位并设置尺寸为外部div，尝试给外部div一个像素高度和像素宽度...
编辑
而不是：
< div id ='map_canvas'>< / div>
< div>
< div id ='map_canvas2'>< / div>
< / div>
尝试：
<！ - < div id ='map_canvas'>< / div> - >
< div style =width：900px; height：900px;>
< div id ='map_canvas2'>< / div>
< / div>
您会看到地图正在运行...
I'm trying to use the Google Maps API and the div that is going to contain the map works only when not inside another div. I've created a little sample code with two maps, the first works the second doesn't. If I remove the doctype of this piece of code, both work. Any ideas why?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' />
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 50% }
#map_canvas2 { height: 50% }
</style>
<title>Map</title>
<script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script type='text/javascript'>
function initialize() {
var latlng = new google.maps.LatLng(20, 20);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
</script>
</head>
<body onload='initialize()'>
<div id='map_canvas'></div>
<div>
<div id='map_canvas2'></div>
</div>
</body>
</html>
This is how it looks like in Firefox and Chrome:
It does work, If you inspect the page in firebug, you'll see that the map is being created. But because you have no CSS positioning applied to the outer div, the map div created by Google maps is positioned under the first map_canvas
You need to position and set the dimensions for the outer div, try by giving the outer div a pixel height and pixel width...
EDIT
instead of :
<div id='map_canvas'></div>
<div>
<div id='map_canvas2'></div>
</div>
try :
<!--<div id='map_canvas'></div>-->
<div style="width:900px;height:900px;">
<div id='map_canvas2'></div>
</div>
You will see the map is working...
这篇关于Google地图在div内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
