Question

我正在尝试学习如何编写HTML和javascript代码，但无论我做什么，我都无法在我的网站上的“main”div中显示地图：

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);

有人可以告诉我哪里出错了吗？

Answer 1

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

您需要将绝对高度和宽度应用于地图容器并更改初始化模式

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

查看我所做的更改

Answer 2

我想问题是jsFiddle中的js是在窗口加载事件上执行的（你可以在左边的菜单中更改），所以谷歌地图load事件永远不会被解雇，因为一切都已加载。< / p>

将jsFiddle中的该选项更改为onDomReady，它应该可以正常工作。

http://jsfiddle.net/G6YMm/

基本的谷歌地图 - 无法显示它

2 个答案: