1

Web ページを作成し、Google マップを挿入しました。しかし、地図は常に表示されません。Firebug を使用して何が起こったのかを確認しようとしましたが、エラーがないことがわかりました。

map-canvas の div は Google Map API に正しく置き換えられましたが、その div は表示されません...これを数日間デバッグしましたが、まだ解決策はありません。

    <html><head>
        <meta charset="UTF-8">
        <meta content="IE=Edge" http-equiv="X-UA-Compatible">

        <meta content="initial-scale=1.0, user-scalable=no" name="viewport">
        <meta charset="utf-8">

        <title>TaskPaneApp1</title>
        <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js" style=""></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    </head>

    <body>
        <!-- Page content -->
        <div id="content-header">
            <div class="padding">
                <h1>Welcome</h1>
            </div>
        </div>
        <div id="content-main">
            <div class="padding">
                <p><strong>Add home screen content here.</strong></p>
                <p>For example:</p>
                <button id="get-data-from-selection">Get data from selection</button>

                <p style="margin-top: 50px;">
                    <a href="http://go.microsoft.com/fwlink/?LinkId=276812" target="_blank">
                        Find more samples online...
                    </a>
                </p>
                <div style="position: relative">
                    <p>Hey there!</p>
                    <div style="position: relative; width: 100%; height: 500px">
                        <div id="map-canvas">
                            Loading...
                        </div>
                    </div>  
                    <p>This is the end of the map</p>
                </div>
            </div>
        </div>

    <script type="text/javascript">
        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('map-canvas'),
                  mapOptions);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    </body></html>
4

2 に答える 2

2

マップ div のサイズを設定しませんでしたが、マップがネストされている div のサイズを設定しました。高さと幅のプロパティを div id 'map-canvas' に追加すると、マップが表示されます。

    <div id="map-canvas" style="width: 400px; height: 400px;">Loading...</div>
于 2013-10-23T02:54:30.067 に答える
1

マップ div にサイズがありません。これ：

<div id="map-canvas" style="height:300px; width:300px;">

表示させます。

于 2013-10-23T03:03:58.007 に答える