基本谷歌地圖 - 無法讓它顯示

我想學習如何編碼HTML和JavaScript，但無論我做什麼我都無法在我的網站上的「主」div中顯示地圖t顯示：基本谷歌地圖 - 無法讓它顯示

HTML：

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    </head> 
    <body> 
    <!-- Header --> 
    <div id="topbar"> 
     <div class="left"> 
     Logo 
     </div> 
     <div class="right"> 
<form> 
    <div id="radio"> 
    <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label> 
    <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label> 
    <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label> 
    </div> 
</form> 
     </div> 
    </div> 
    <!-- Map --> 
    <div id="main"></div> 
    <!-- Footer --> 
    <div id="bottombar"> 
     <div class="left"> 
     Name 
     </div> 
     <div class="right"> 
     About 
     </div> 
    </div> 
    </body> 
</html>

JS：

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('main'), 
      mapOptions); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize);

是否有人可以告訴我我哪裏錯了？

來源

2013-02-14 Jimmy

的可能重複的[流體寬度谷歌地圖（http://stackoverflow.com/questions/8768580/fluid-width-google-maps）的jsfiddle]（http://jsfiddle.net/W4mXP/20 /） – geocodezip 2013-02-14 14:28:14

http://jsfiddle.net/W4mXP/19/

您需要申請的絕對高度和寬度到地圖容器和更改初始化模式

$(document).ready(function($) { 
    initialize(); 
});

看到的變化，我讓

來源

2013-02-14 12:05:55

他不需要更改爲使用document.ready - 窗口加載事件的Google事件偵聽器應該足夠了。 – duncan 2013-02-14 12:09:53

...除非你暗指同樣的問題@dmk指出，這與它不工作在jsfiddle – duncan 2013-02-14 12:27:32

我想這個問題是， jsFiddle中的js在窗口加載事件中執行（您可以在左側菜單中更改它），所以Google地圖load事件永遠不會被解僱，因爲所有內容都已加載。

將jsFiddle中的該選項更改爲onDomReady，它應該可以正常工作。

http://jsfiddle.net/G6YMm/

來源

2013-02-14 12:14:49 dmk

基本谷歌地圖 - 無法讓它顯示

回答

相關問題