google map V3 div posizione cambio fisso relativo

Question

In primo luogo, mi dispiace per il mio inglese perché non è buono.

Ho un problema con una mappa di google. Sto cercando di ottenere una mappa in un div, e voglio che questo div con posizione: fisso.

Il mio problema è dopo aver disegnato la mappa perché cambia la posizione del div. All'inizio è fisso e dopo aver disegnato è relativo e cambia la posizione del div.

Ecco il mio codice, 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> 

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

} 

Dopo click it "la mappa" Posso vedere la mappa correttamente, ma in posizione di errore se vedo il codice in Firebug. lo stile in div "capaMapa" è cambiato e ora si posiziona: relativo e questo div è disegnato in posizione di errore.

Ho visto che questa modifica dopo l'inizializzazione della mappa, "map = new google.maps.Map (document.getElementById (" capaMapa "), myOptions);" perché se commento questa linea, per disegnare div in posizione corretta.

Qualche suggerimento?

Answer 1

L'elemento DOM contenente la mappa (#capaMapa nell'esempio) avrà sempre position: relative;. Prova racchiudendolo in un altro elemento che è possibile lo stile come previsto:

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

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