GoogleマップV3 divの位置固定の相対的な変更

Question

まず、私の英語のために申し訳ありませんが良いではありません。

Googleマップに問題があります。私はdivで地図を取得しようとしていますが、私はこのdivをposition：fixedにしたいと考えています。

私の問題は、divの位置を変更するためにマップを描画した後です。最初は固定されており、描かれた後は相対的であり、divの位置を変更します。私は放火犯のコードを見れば、私は正しくなく、誤り位置にマップを見ることができる "マップを参照" ENここ

は私のコード、HTMLをクリックした後

<div class="verMapa"> SEE MAP </div>   
<br><br><br>   
<div> 
    <div id="mask" style="display:none; background-color:#000000; position:absolute; right:0; top:0; z-index:9000;"></div> 

    <div id="capaMapa" style= "display:none; background-color:white; position:fixed; top:50%; left:50%; width:600px; height:400px; margin-top:-200px; margin-left:-300px;z-index:9900;"> 
    </div> 
</div> 

CODE Javascriptを

var map = null; 

$(document).ready(function(){ 

    //Evento click en Mask que cierra el mapa. 
    $("#mask").click(function(){  
     $('#mask').hide(); 
     $('#capaMapa').hide(); 
     $('#capaMapa').html(""); 
    }); 


    //Evento click en ver mapa 
    $(".verMapa").click(function(){ 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth, 'height':maskHeight}); 

     //transition effect 
     $('#mask').fadeIn(1000); 
     $('#mask').fadeTo("slow", 0.5); 

     //transition effect 
     $('#capaMapa').fadeIn(2000); 

     initialize(40, -1); 

    }); 

}); 


function initialize(latitud, longitud) {    

    myOptions = { 
     zoom: 14, 
     center: new google.maps.LatLng(latitud, longitud), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    //inicializamos el mapa. 
    map = new google.maps.Map(document.getElementById("capaMapa"), myOptions); 

} 

です。 divのスタイル "capaMapa"が変更され、position：relativeになり、このdivがエラー位置に描画されます。

マップの初期化後にこの変更が発生していることがわかりました。「map = new google.maps.Map（document.getElementById（ "capaMapa"）、myOptions）; "なぜなら私はこの行をコメントしてdivを正しい位置に描画するからです。

いずれかをお勧めしますか？

Answer 1

マップを含むDOM要素（あなたの例では#capaMapa）は、常にposition: relative;です。 あなたが意図したようにスタイリングすることができます別の要素で囲む試してみてください。

<div id="capaMapa"><div id="map-canvas"></div></div> 

はあなたのCSS：

#capaMapa { 
    display:none; 
    background-color:white; 
    position:fixed; 
    top:50%; 
    left:50%; 
    width:600px; 
    height:400px; 
    margin-top:-200px; 
    margin-left:-300px; 
    z-index:9900; 
} 

#map-canvas { 
    position: relative; /* Will be set by the Maps API anyway */ 
    width: 100%; 
    height: 100%; 
}