Google मानचित्र V3 div स्थिति निश्चित परिवर्तन सापेक्ष

Question

सबसे पहले, मेरी अंग्रेजी के लिए खेद है क्योंकि यह अच्छा नहीं है।

मुझे एक Google मानचित्र के साथ समस्या है। मैं एक div में एक नक्शा पाने की कोशिश कर रहा हूं, और मैं चाहता हूं कि यह div स्थिति के साथ: निश्चित हो।

मेरी समस्या नक्शा खींचने के बाद है क्योंकि div की स्थिति बदलती है। शुरुआत में तय किया जाता है और खींचे जाने के बाद सापेक्ष होता है और div की स्थिति बदल जाता है।

यहाँ मेरी कोड, एचटीएमएल है

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

} 

hi "मानचित्र" क्लिक करने के बाद मैं नक्शा देख सकते हैं सही ढंग से लेकिन त्रुटि की स्थिति में अगर मैं फ़ायरबग में कोड देखें। div "capaMapa" में शैली बदल गई है और अब स्थिति: सापेक्ष और यह div त्रुटि स्थिति में खींचा गया है।

मैंने देखा है कि मानचित्र को आरंभ करने के बाद यह परिवर्तन, "map = new google.maps.Map (document.getElementById (" capaMapa "), myOptions);" क्योंकि यदि मैं सही स्थिति में div खींचने के लिए, इस पंक्ति पर टिप्पणी करता हूं।

कोई सुझाव?

Answer 1

मानचित्र युक्त DOM तत्व (#capaMapa आपके उदाहरण में) हमेशा position: relative; होगा। एक और तत्व में यह enclosing है कि आप के रूप में इरादा शैली कर सकते हैं का प्रयास करें:

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

आपका सीएसएस:

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