divタグにネストされているときにGoogle Maps JavaScript API v3に表示されない

divのマップに別のdivが含まれていることを示すdivタグを挿入しようとしていますが、そのように地図は表示されません。それはCSSかJavaScriptの問題ですか？それともAPIの仕組みですか？ここでdivタグにネストされているときにGoogle Maps JavaScript API v3に表示されない

は、ネストされた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>

出典

2013-05-02 Anonymous

は、IVEは、私がグーグルと協力という問題があったことがない、それはIDがそれはあなたのために何をするか見DIV与えてみてください...毎日 –

@AaronRussellをマップ：何も起こりません、それはまだ示していません。 –

okay hm ... 'style = "width：100％; height：100％;" 'divに何が起こるのかを見てください...（地図div、外部divにはありません） –

それが何をするか見るのdivにstyle="width:100%; height:100%;"を追加

ない#map_canvasが、メインのdiv

例にこれが必要な理由をここにいくつかの他の回答には説明があり

<body> 
    <div style="height:100%; width:100%;"> 
     <div id="map-canvas"></div> 
    </div> 
</body>

出典

2013-05-02 23:52:44

あなたのソリューションは私にとってはうまくいかないhttp://stackoverflow.com/questions/42823800/google-map-appears-after-browser-size-changes –

問題はパーセントのサイズです。親div（新しいもの）のサイズを定義していないため、ブラウザはGoogle Maps APIにサイズを報告できません。ラッパーdivに特定のサイズを指定するか、親のサイズを判断できる場合はパーセンテージサイズを指定します。

はthis explanation from Mike Williams' Google Maps API v2 tutorialを参照してください：

あなたのスタイル= "幅：100％;高さ：100％" を使用しようとすると、あなたの地図のdivのを、あなたはゼロ高さを持っている地図のdivを取得します。 divは<body>のサイズのパーセンテージであることを試みるため、ですが、デフォルトでは<body>は不確定のの高さです。

マップの高さを決定し、そのピクセル数をマップdivの高さとして使用する方法がありますが、単純な代替方法は、その高さがページの100％になるように<body>を変更することです。 <body>と<html>の両方にstyle = "height：100％"を適用すると、でこれを行うことができます。（私たちは、そうでない <body>試みは、文書の高さを100％とし、両方にそれをしなければならない、そのためのデフォルトは不定の高さである。）

はHTMLに100％のサイズを追加し、あなたのCSSの身体

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-02 23:50:33 geocodezip

ウィザード

余分な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-02 23:51:17

私にとっては、高さを追加するだけで十分でした（divはゼロの高さで出ていました）。 –

'px'を指定すると応答性が妨げられるとは思わないのですか？ – ImranNaqvi

この問題は、

で解決しました。

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

出典

2013-09-24 14:09:55

これは私のために働いた '

'インラインスタイルなしで相対的な位置にデフォルト設定され、空白の画面が表示されました。 –

私の場合、灰色の背景が表示されていて、マップオプションにズーム値を含めることが判明しました。うん、意味がない。私はちょうど私のために働いていたものを追加したい

出典

2014-12-06 20:55:57

、私は両方のdiv要素に高さと幅を追加し、 Here

に位置し、ブートストラップ参照を追加仕事に col-lg-1ためには、それに応答

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

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

作るために、ブートストラップを使用しました

出典

2017-03-16 22:47:27 wilaponce

FIXED

この小さなことがどのように修正するのに時間がかかったのかはわかりません。 divの初期高さを指定し、高さをパーセントで指定します。

#map { 
    height: 100%; 
} 

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

出典

2017-04-26 14:44:09 Yergalem

divタグにネストされているときにGoogle Maps JavaScript API v3に表示されない

答えて

関連する問題