为什么我的Google地图“Hello world？”？页面显示为空？ [英] Why is my Google Maps "Hello world?" page displaying as empty?
本文介绍了为什么我的Google地图“Hello world？”？页面显示为空？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有我的页面来源;我试图将谷歌地图加载到Boilerplate 3，并获得一个没有JavaScript错误的空白页面。如何改进？
I have the source of my page below; I tried to load Google Maps into Boilerplate 3, and am getting a blank page with no JavaScript errors. How could this be improved?
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3.min.js"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%, width: 100% }
</style>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header>
</header>
<div role="main">
<div id="map_canvas">
</div>
</div>
<footer>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script>
function initialize()
{
var myoptions = {
zoom: 4,
center: new google.maps.LatLng(42.881944, -87.627778),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
myoptions);
}
function load_script()
{
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?key=AIzaSyAi288X8h9Y4fXM21Q0-my6O6kiLaDeC7M&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = load_script;
</script>
</body>
</html>
- 编辑 -
我从Google的例子中拼凑出来的代码首先开始绘制地图，然后擦掉屏幕并说我的密钥不能用于它：
The code I cobbled together from Google's example first started on painting a map, then wiped the screen and said my key couldn't used for it:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAi288X8h9Y4fXM21Q0-my6O6kiLaDeC7M&sensor=true">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
</head>
<body onload="initialize();">
<script>
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<body>
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>
推荐答案
定义map_canvas div的宽度。
Define a width for the map_canvas div.
这篇关于为什么我的Google地图“Hello world？”？页面显示为空？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
