Googleマップdivを固定することができません

私はGoogleマップdivを常に表示するように修正しようとしていますが、スタイルプロパティ "position：fixed"は動作していません。コードは次のとおりです。Googleマップdivを固定することができません

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta name="layout" content="main" /> 
    <style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 100% } 
    </style> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 

      Some script 

     </script> 
    </head> 
    <body onload="initialize()"> 
    <div class="nav"> 

      First div 

    </div> 
    <div id="artistList"> 

      Second div 

    </div> 
    <div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%"> 

      Map div 

    </div> 
    </body> 
</html>

ヘルプがありますか？ありがとうございました

出典

2011-07-04 Bruno Morgado

あなたのコードを少しきれいにして見やすくする必要があります。まず、CSSのスタイル設定をmap_canvasからhtmlヘッドのCSSセクションに移動します。残るものは清潔です<div id="map_canvas"></div>です。さあ、HTMLの頭のCSSセクションに向かいましょう。このようにそれを試してみてください。

<style type="text/css"> 
html {} 
body {margin: 0px; padding: 10px } 
#map_canvas { 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 90%; 
    height: 90%; 
    border:1px solid #f00; 
    margin:10px; 
} 
</style>

私はhtmlとbodyからheight:100%;を削除しました。キャンバスのサイズを100％から90％に減らし、赤い枠線と10pxのマージンを与えて、物事をより明確にしました。 divは今すぐ右上隅に設定され、固定されています。 FF、Chrome、Safari、IEでテストしました。

今はちょっと質問があります...キャンバスを100％幅広くすることは理にかなっていますか？ map_canvasはあなたのhtmlの中のすべてを隠すでしょう...？

出典

2011-07-04 23:14:18 Marco

ありがとうございました！しかしそれはまだ私のために働かない。今度は地図が一度も現れず、上に赤い線が1つしか見えません。私はGrails .gspでこれをやっています。私はこれに新しいので、おそらく私が知らない何かがあります。 –

質問について私のポイントは、ページの背景にマップを持ち、常に表示され、次にマップをオーバーレイする他のdivです。私はこのオーバーレイを次のようにして成功させました。 z-インデックス：1; –

これは、それを解決します：

<div id="fixed" style="position:fixed; top:0"> 
    <div id="map_canvas" style="width:100%; height:100%"> 
    [map content goes here] 
    </div> 
</div>

出典

2013-04-20 21:10:54

Najeebのソリューションは、私のために動作しませんでした。

"tilesloaded"マップイベントの後にmap要素cssを変更します（position：absoluteからposition：fixedに変更）。

出典

2014-12-07 23:40:53 micksabox

Googleマップdivを固定することができません

答えて

関連する問題