爲什麼我的Google地圖「Hello world？」頁面顯示爲空？

我有我的頁面的來源;我試圖將谷歌地圖加載到Boilerplate 3，並獲得一個沒有JavaScript錯誤的空白頁面。這怎麼能改進？爲什麼我的Google地圖「Hello world？」頁面顯示爲空？

<!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>

- 編輯 -

我從谷歌的例子拼湊起來的代碼首先開始畫一張地圖，然後擦拭屏幕，說我的鑰匙不能用於它：

<!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>

來源

2012-06-27 JonathanHayward

alert（），放置在jQuery.ready（）函數的開始和結尾，不起作用。 jQuery.ready（）結束後放置的alert（）被調用。我在使用jQuery.ready（）時犯了一個錯誤嗎？ – JonathanHayward

這不是Google的「Hello World示例」的代碼，我們無法看到您加載的其他代碼。什麼在/js/script.js？鏈接到現場演示頁面可能會有所幫助。 – Marcelo