0

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

http://jsfiddle.net/W4mXP/10/

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

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

4

2 回答 2

1

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

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

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

查看我所做的更改

于 2013-02-14T12:05:55.590 回答
0

我猜问题是你在 jsFiddle 中的 js 是在窗口加载事件上执行的（你可以在左侧的菜单中更改它），所以谷歌地图load事件永远不会被触发，因为一切都已经加载。

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

http://jsfiddle.net/G6YMm/

于 2013-02-14T12:14:49.110 回答