谷歌地圖V3 div位置固定更改相對

Question

首先，對不起我的英文，因爲不好。

我有一個谷歌地圖的問題。我試圖在一個div中獲得一張地圖，並且我希望這個div位置固定。

我的問題是繪製地圖後，因爲改變div的位置。一開始是固定的，之後繪製是相對的，改變div的位置。

這裏是我的代碼，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> 

編寫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」風格已經改變，現在的位置：相對，這個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%; 
}