google map V3 posición div cambio fijo relativo

Question

Primero, disculpe mi inglés porque no es bueno.

Tengo un problema con un mapa de google. Estoy tratando de obtener un mapa en un div, y quiero que este div con posición: fijo.

Mi problema está después de dibujar el mapa porque cambia la posición del div. Al principio es fijo y después de dibujado es relativo y cambia la posición del div.

Aquí está mi código, 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> 

código 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); 

} 

Después clic en "ver mapa" Puedo ver el mapa correctamente, pero en la posición de error si veo código en Firebug. el estilo en div "capaMapa" ha cambiado y ahora posición: relativo y este div se dibuja en posición de error.

He visto que este cambio después del mapa de inicialización, "map = new google.maps.Map (document.getElementById (" capaMapa "), myOptions);" porque si comento esta línea, dibuje div en la posición correcta.

¿Alguna sugerencia?

Answer 1

El elemento DOM que contiene el mapa (#capaMapa en su ejemplo) siempre tendrá position: relative;. Trate encerrándolo en otro elemento que puede estilo según lo previsto:

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

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