54

divマップを表示するタグ ( <div id="map-canvas"></div>) を別の 内に配置しようとしてdivいますが、マップがそのように表示されません。それはCSSまたはJavaScriptの問題ですか？それとも、API の仕組みだけですか?

ネストされた を使用した私のコードは次のdivとおりです。 

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script>
        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>
</head>
<body>
    <div> <!-- ommiting this div will show the map -->
        <div id="map-canvas"></div>
    </div>
</body>
</html>
4

8 に答える 8

47

問題はパーセンテージのサイジングにあります。親 div (新しいもの) のサイズを定義していないため、ブラウザーはサイズを Google Maps API に報告できません。ラッパー div に特定のサイズを指定するか、親のサイズが特定できる場合はパーセンテージ サイズを指定すると機能します。

Mike Williams の Google Maps API v2 チュートリアルの説明を参照してください。

マップ div で style="width:100%;height:100%" を使用しようとすると、高さがゼロのマップ div が得られます。これは、div が のサイズのパーセンテージになろうとするため<body>ですが、デフォルトで<body>は の高さが不定です。

画面の高さを決定し、そのピクセル数をマップ div の高さとして使用する方法がありますが、簡単な代替方法は<body>、高さがページの 100% になるように を変更することです。これを行うには、 style="height:100%" を と<body>の両方に適用し<html>ます。(両方に対して行う必要があります。そうしない <body>と、 はドキュメントの高さの 100% になろうとします。そのためのデフォルトの高さは不定です。)

css の html と body に 100% サイズを追加します

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

ID を持たない div にインラインで追加します。

<body>
  <div style="height:100%; width: 100%;"> 
    <div id="map-canvas"></div>
  </div>
</body>
于 2013-05-02T23:50:33.720 に答える
23

私はこの問題を次のように解決しました：

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>
于 2013-09-24T14:09:55.523 に答える
5

ウィザード

追加の div の高さと幅を設定してみましたか? 私が作業しているプロジェクトでは、高さと幅が既に設定されていない限り、JS は div に何も配置しないことを知っています。

私はあなたのコードを使用し、高さと幅をハードコーディングしました。それは表示されますが、それなしでは表示されません。

<body>
    <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
         <div id="map-canvas"></div>
    </div>
</body>

ハードコーディングするか、div に ID を割り当ててから CSS ファイルに追加することをお勧めします。

于 2013-05-02T23:51:17.213 に答える
4

うまくいったものを追加したいだけです。両方のdivに高さと幅を追加し、ブートストラップを使用して応答性を高めました

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

機能するために、ここcol-lg-1にあるブートストラップ参照を追加します

于 2017-03-16T22:47:27.980 に答える