web-dev-qa-db-ja.com

divタグにネストされている場合、Google Maps JavaScript API v3で地図が表示されない

マップを表示する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>
javascriptgoogle-maps-api-3
51
user2315898

問題は、割合のサイジングにあります。親div（新しい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と本文に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>
46
geocodezip

私はこの問題を次の方法で解決しました。

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>
22
ramazan polat

一定

Divの初期高さを指定し、スタイルの高さをパーセンテージで指定します。

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>
11
Yergalem

私の場合、灰色の背景が表示されていましたが、マップオプションにズーム値が含まれていることがわかりました。うん、意味がありません。

9
Josef.B

Wizard

余分な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ファイルに追加することをお勧めします。

4
Nick Darley

私はちょうど私のために働いたものを追加したい、私は両方のdivに高さと幅を追加し、bootstrapを使用して応答性を高めました

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

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

col-lg-1が機能するには、bootstrap参照を追加します ここ

4
wilaponce

これは解決されましたが、上記のソリューションはすべての状況で機能するとは限りません。

私の場合、

<div style="height: 490px; position:relative; overflow:hidden">
    <div id="map-canvas"></div>
</div>
0
Sem