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すべてがすでにロードされているため、Googleマップイベントが発生しないことだと思います。

jsFiddleのそのオプションをに変更すると、正常に機能するonDomReadyはずです。

http://jsfiddle.net/G6YMm/

于 2013-02-14T12:14:49.110 に答える