Google Map未显示 [英] Google Map not shown
本文介绍了Google Map未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我写了一个网页，并在其中插入Google Map。但地图总是没有显示。我试图用Firebug来查看发生了什么，并发现没有错误。
map-canvas的div已被正确替换谷歌地图API，但该div未显示...
我调试了几天，仍然没有解决方案。
< HTML>< HEAD>
< meta charset =UTF-8>
< meta content =IE = Edgehttp-equiv =X-UA兼容>
< meta charset =utf-8>
< title> TaskPaneApp1< / title>
< script type =text / javascriptsrc =https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.jsstyle =>< /脚本>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< / head>
< body>
<！ - 页面内容 - >
< div id =content-header>
< div class =padding>
< h1>欢迎< / h1>
< / div>
< / div>
< div id =content-main>
< div class =padding>
< p>< strong>在此添加主屏幕内容。< / strong>< / p>
< p>例如：< / p>
< button id =get-data-from-selection>从选择< /按钮>获取数据
< p style =margin-top：50px;>
< a href =http://go.microsoft.com/fwlink/?LinkId=276812target =_ blank>
在线查找更多样本...
< / a>
< / p>
< div style =position：relative>
< p> Hey there！< / p>
< div style =position：relative; width：100％; height：500px>
< div id =map-canvas>
加载中...
< / div>
< / div>
< p>这是地图的结尾< / p>
< / div>
< / div>
< / div>
< script type =text / javascript>
var map;
函数initialize（）{
var mapOptions = {
zoom：8，
center：new google.maps.LatLng（-34.397,150.644），
mapTypeId： google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（'map-canvas'），
mapOptions）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / body>< / html>
解决方案
您的地图div没有大小。这：
< div id =map-canvasstyle =height：300px; width：300px;>
会显示给我。
I write a web page, and inserted Google Map into it. But the map always not shown. I tried to use Firebug to see what happened, and found there are no errors.
The div of map-canvas has been correctly replaced by Google Map API but that div not shown... I debugged this for several days, still no solution.
<html><head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>TaskPaneApp1</title>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<!-- Page content -->
<div id="content-header">
<div class="padding">
<h1>Welcome</h1>
</div>
</div>
<div id="content-main">
<div class="padding">
<p><strong>Add home screen content here.</strong></p>
<p>For example:</p>
<button id="get-data-from-selection">Get data from selection</button>
<p style="margin-top: 50px;">
<a href="http://go.microsoft.com/fwlink/?LinkId=276812" target="_blank">
Find more samples online...
</a>
</p>
<div style="position: relative">
<p>Hey there!</p>
<div style="position: relative; width: 100%; height: 500px">
<div id="map-canvas">
Loading...
</div>
</div>
<p>This is the end of the map</p>
</div>
</div>
</div>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body></html>
解决方案
Your map div doesn't have a size. This:
<div id="map-canvas" style="height:300px; width:300px;">
makes it display for me.
这篇关于Google Map未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
