mapa google V3 div pozycja stała zmiana względna

Question

Po pierwsze, przepraszam za mój angielski, ponieważ nie jest dobrze.

Mam problem z mapą google. Próbuję uzyskać mapę w div, i chcę, aby ten div z pozycji: naprawiony.

Mój problem polega na tym, aby narysować mapę, ponieważ zmieni ona położenie elementu div. Na początku jest ustalona, ​​a po narysowaniu jest względna i zmienia pozycję div.

Oto mój kod 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> 

kod 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); 

} 

Po kliknięciu en „zobacz na mapie” Widzę mapę poprawnie, ale w pozycji błędu jeśli widzę kod w Firebug. styl w div "capaMapa" zmienił się i teraz pozycja: relative i ten div jest narysowany w pozycji błędu.

Widziałem, że ta zmiana po zainicjalizowanej mapie, "map = new google.maps.Map (document.getElementById (" capaMapa "), myOptions);" ponieważ jeśli skomentuję ten wiersz, narysuj div we właściwej pozycji.

Wszelkie sugestie?

Answer 1

Element DOM zawierający mapę (#capaMapa w twoim przykładzie) zawsze będzie mieć position: relative;. Spróbuj zamykając go w innym elementem, który można w sposób zamierzony styl:

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

Twój 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%; 
}