Google Maps API v3 |显示没有地图数据 [英] Google Maps API v3 | shows no map data
问题描述
我正在为我们当地的消防员家编写一个小型的JavaScript应用程序。该应用程序有点像Powerpoint等，但在HTML中。
在这个应用程序中，我将显示带有显示从消防员家到火灾路线的路线的谷歌地图地图。
我使用jquery从http服务器请求数据。
我的问题是我插入了Google Maps API的代码，浏览器显示了我地图对象与谷歌标志等。但是没有地图，只有灰色的背景。使用鼠标，我似乎可以在地图上放大/缩小，滚动等（如果我互动，在firebug将数据传输到Google API），但地图不在那里。
我插入了我的个人地图api密钥，如果我删除它，插件显示失败。所以我认为这不是问题。
jquery和maps api有问题吗？
任何其他人都有这个问题吗？
<！DOCTYPE html>
< html>
< head>
< title>< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8>
< link rel =stylesheettype =text / csshref =./ css / standard.css>
< script src =./ js / libs / jquery-1.9.0 / jquery.min.jstype =text / javascript>< / script>
< script type =text / javascript
src =http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false>
< / script>
< script type =text / javascript>
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（50.98188，6.78655），
zoom：8，
mapTypeId：google .maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
window.console.log（Position center：+ map.getCenter（）+\\\
Zoom：+ map.getZoom（））;
map.setZoom（12）;
map.setCenter（new google.maps.LatLng（0，0））;
window.console.log（Position center：+ map.getCenter（）+\\\
Zoom：+ map.getZoom（））;
}
< / script>
< / head>
< body>
< div id =site_content>
< div id =head_leftclass =background_box>
< / div>
< div id =head_centerclass =background_box>
< div class =heading>< / div>
< / div>
< div id =head_rightclass =background_box>
< h1 class =date_data>< / h1>
< h1 class =time_data>< / h1>
< / div>
< div class =spacing_data>< / div>
< div id =data_boxclass =background_box>
< div id =map_canvasstyle =width：100％; height：100％>< / div>
< / div>
< div class =spacing_data>< / div>
< div id =footer_leftclass =background_box>
< / div>
< div id =footer_centerclass =background_box>
< div class =footer>< / div>
< / div>
< div id =footer_rightclass =background_box>
< / div>
< / div>
< script>
jQuery.getScript（./ js / initialisation.js，function（）{initialisation（）;}）;
initialize（）;
< / script>
< / body>
没有内容，因为这样是所有在运行时从服务器加载到jquery上，然后插入到dom中。
请参阅 Mike Williams在他的v2教程中对百分比大小的地图的描述
您需要向地图的所有父元素添加定义，以允许浏览器计算非零大小。
<！DOCTYPE html> ;
< html>
< head>
< title>< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< style type =text / css>
html，body {
width：100％;
身高：100％;
}
< / style>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js>< / script>
< script type =text / javascriptsrc =http://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type =text / javascript>
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（50.98188，6.78655），
zoom：8，
mapTypeId：google .maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
window.console.log（Position center：+ map.getCenter（）+\\\
Zoom：+ map.getZoom（））;
map.setZoom（12）;
map.setCenter（new google.maps.LatLng（0，0））;
window.console.log（Position center：+ map.getCenter（）+\\\
Zoom：+ map.getZoom（））;
}
google.maps.event.addDomListener（window，load，initialize）;
< / script>
< / head>
< body>
< div id =site_contentstyle =width：100％; height：100％;>
< div id =head_leftclass =background_box>
< / div>
< div id =head_centerclass =background_box>
< div class =heading>< / div>
< / div>
< div id =head_rightclass =background_box>
< h1 class =date_data>< / h1>
< h1 class =time_data>< / h1>
< / div>
< div class =spacing_data>< / div>
< div id =data_boxclass =background_boxstyle =width：100％; height：100％;>
< div id =map_canvasstyle =width：100％; height：100％;>< / div>
< / div>
< div class =spacing_data>< / div>
< div id =footer_leftclass =background_box>
< / div>
< div id =footer_centerclass =background_box>
< div class =footer>< / div>
< / div>
< div id =footer_rightclass =background_box>
< / div>
< / div>
< / body>
< / html>
i'm program a small javascript application for our local firefighter home. The application is a little like powerpoint etc. but in html. In this application i would show a google maps map with a route that shows the way from the firefighter home to the fire. I use jquery for requesting the data from the http server.
My Problem is that i have inserted the code for the google maps api and the browser shows me the maps object with the google logo and so on. But there is no map, there is only a gray background. With the mouse it seems that i can zoom in/out, scroll etc in the map (if i interact, in firebug comes datatransfers to the google api), but the map wasn't there.
My personal maps api key is inserted and if i delete it the plugin shows a failure. So i think that can't be the problem.
is there a problem with jquery and the maps api? Anyone else around having this problem?
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/standard.css">
<script src="./js/libs/jquery-1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=api_key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.98188, 6.78655),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
map.setZoom(12);
map.setCenter(new google.maps.LatLng(0, 0));
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
}
</script>
</head>
<body>
<div id="site_content">
<div id="head_left" class="background_box">
</div>
<div id="head_center" class="background_box">
<div class="heading"></div>
</div>
<div id="head_right" class="background_box">
<h1 class="date_data"></h1>
<h1 class="time_data"></h1>
</div>
<div class="spacing_data"></div>
<div id="data_box" class="background_box">
<div id="map_canvas" style="width: 100%;height: 100%"></div>
</div>
<div class="spacing_data"></div>
<div id="footer_left" class="background_box">
</div>
<div id="footer_center" class="background_box">
<div class="footer"></div>
</div>
<div id="footer_right" class="background_box">
</div>
</div>
<script>
jQuery.getScript("./js/initialisation.js",function(){initialisation();});
initialize();
</script>
</body>
there is no content because this is all loaded at runtime from the server over jquery and then inserted into dom.
See Mike Williams' description on percentage sized maps from his v2 tutorial
You need to add definitions to all the parent elements of the map to allow the browser to calculate a non-zero size.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body {
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(50.98188, 6.78655),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
map.setZoom(12);
map.setCenter(new google.maps.LatLng(0, 0));
window.console.log("Position center: "+map.getCenter()+"\nZoom: "+map.getZoom());
}
google.maps.event.addDomListener(window,"load",initialize);
</script>
</head>
<body>
<div id="site_content" style="width: 100%;height: 100%;">
<div id="head_left" class="background_box" >
</div>
<div id="head_center" class="background_box">
<div class="heading"></div>
</div>
<div id="head_right" class="background_box">
<h1 class="date_data"></h1>
<h1 class="time_data"></h1>
</div>
<div class="spacing_data"></div>
<div id="data_box" class="background_box" style="width: 100%;height: 100%;">
<div id="map_canvas" style="width: 100%;height: 100%;"></div>
</div>
<div class="spacing_data"></div>
<div id="footer_left" class="background_box">
</div>
<div id="footer_center" class="background_box">
<div class="footer"></div>
</div>
<div id="footer_right" class="background_box">
</div>
</div>
</body>
</html>
这篇关于Google Maps API v3 |显示没有地图数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
