bản đồ google V3 vị trí div thay đổi cố định tương đối

Question

Đầu tiên, xin lỗi vì tiếng Anh của tôi vì không tốt.

Tôi gặp sự cố với bản đồ google. Tôi đang cố gắng để có được một bản đồ trong một div, và tôi muốn rằng div này với vị trí: cố định.

Vấn đề của tôi là sau khi vẽ bản đồ vì thay đổi vị trí của div. Ban đầu là cố định và sau khi rút ra là tương đối và thay đổi vị trí của div.

Đây là mã của tôi, 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> 

mã 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); 

} 

Sau khi nhấp chuột en "nhìn thấy bản đồ" Tôi có thể xem bản đồ một cách chính xác nhưng ở vị trí lỗi nếu tôi thấy mã trong firebug. phong cách trong div "capaMapa" đã thay đổi và bây giờ vị trí: tương đối và div này được rút ra ở vị trí lỗi.

Tôi đã thấy thay đổi này sau khi khởi tạo bản đồ, "map = new google.maps.Map (document.getElementById (" capaMapa "), myOptions);" bởi vì nếu tôi bình luận dòng này, để vẽ div ở vị trí chính xác.

Có đề xuất nào không?

Answer 1

Phần tử DOM có chứa bản đồ (#capaMapa trong ví dụ của bạn) sẽ luôn có position: relative;. Hãy thử kèm theo nó trong một yếu tố khác mà bạn có thể tạo kiểu như mong đợi:

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

CSS của bạn:

#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%; 
}