Google मानचित्र एक div

के अंदर काम नहीं करता है, मैं Google मानचित्र API का उपयोग करने की कोशिश कर रहा हूं और नक्शा को शामिल करने वाला div जो केवल दूसरे div के अंदर नहीं होता है। मैंने दो मानचित्रों के साथ थोड़ा सा नमूना कोड बनाया है, पहला काम दूसरा नहीं करता है। अगर मैं कोड के इस टुकड़े के कामकाज को हटा देता हूं, तो दोनों काम करते हैं। कोई विचार क्यों?Google मानचित्र एक div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta content='application/xhtml+xml; charset=UTF-8' http-equiv='content-type' /> 
    <style type='text/css'> 
     html { height: 100% } 
     body { height: 100%; margin: 0px; padding: 0px } 
     #map_canvas { height: 50% } 
     #map_canvas2 { height: 50% } 
    </style> 
    <title>Map</title> 
    <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> 
    <script type='text/javascript'> 
     function initialize() { 
      var latlng = new google.maps.LatLng(20, 20); 
      var myOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); 
     } 
    </script> 
    </head> 
    <body onload='initialize()'> 
    <div id='map_canvas'></div> 
    <div> 
     <div id='map_canvas2'></div> 
    </div> 
    </body> 
</html>

यह है कि यह कैसे लग रहा है Firefox में और क्रोम की तरह है:

alt text

स्रोत

2010-07-07 Pablo

फ़ायरफ़ॉक्स – matpol

@matpol में ठीक काम करता है: वहाँ, मैं अपलोड मैं इसे कैसे फ़ायरफ़ॉक्स और क्रोम में देखते हैं। – Pablo

स्पष्ट रूप से, संक्रमणकालीन सिद्धांत भी काम करता है, इसलिए मैं इसके साथ जा रहा हूं। – Pablo

मुझे लगता है कि वे एक दूसरे को या कुछ और के शीर्ष पर बैठे हैं - बदल सीएसएस पर पिक्सेल ऊंचाइयों की ऊंचाई और दोनों नक्शे काम करेंगे

स्रोत

2010-07-07 13:42:35 matpol

नहीं, वे एक-दूसरे के ऊपर बैठे नहीं हैं। मेरा मूल बग यह है कि नक्शा दिखाया नहीं जा रहा है। मैंने यह उदाहरण दो मानचित्रों के साथ बनाया है जब यह दिखाया गया है कि यह कब दिखाया गया है और जब यह नहीं है। यदि आप पहले मानचित्र पर टिप्पणी करते हैं तो आपको शून्य मानचित्र दिखाई देते हैं। – Pablo

यदि मानचित्र 1 के साथ सबकुछ करने के लिए टिप्पणी करें (यानी जावास्क्रिप्ट कॉल) और 2 मानचित्रों को मैप करने के लिए पिक्सेल में ऊंचाई दें। यदि आप दोनों ऊंचाइयों को पिक्सल दोनों मानचित्रों के काम पर सेट करते हैं। – matpol

यह काम करता है, यदि आप फायरबग में पृष्ठ का निरीक्षण करते हैं, तो आप देखेंगे कि नक्शा बनाया जा रहा है। लेकिन क्योंकि आपके पास बाहरी div पर लागू कोई सीएसएस पोजिशनिंग नहीं है, Google मानचित्र द्वारा बनाए गए मानचित्र डिव को पहले map_canvas

के तहत स्थानांतरित किया गया है, आपको बाह्य div के लिए आयामों को स्थानांतरित करने और सेट करने की आवश्यकता है, बाहरी div को देकर प्रयास करें पिक्सेल ऊंचाई और पिक्सेल चौड़ाई ...

संपादित

बजाय

<div id='map_canvas'></div> 
<div> 
    <div id='map_canvas2'></div> 
</div>

कोशिश:

<!--<div id='map_canvas'></div>--> 
<div style="width:900px;height:900px;"> 
    <div id='map_canvas2'></div> 
</div>

आप मानचित्र काम कर रहा है देखेंगे ...

स्रोत

2010-07-07 13:43:55 ekhaled

मुझे नहीं लगता कि यह मामला है। पहले मानचित्र पर टिप्पणी करें और आपको शून्य मानचित्र दिखाई देंगे। यदि आप सही थे तो आपको अभी भी एक नक्शा देखना चाहिए। – Pablo

मेरे संपादन को चेकआउट करें ... – ekhaled

यह बहुत अच्छा काम करता है .. –

<body onload='initialize()'> 
    <div> 
     <div id='map_canvas'></div> 
    </div> 
</body>

स्रोत

2010-07-07 13:44:18 mcandre

क्या आपने इसे आजमाया है? यह कुछ भी नहीं दिखाता है (यह मेरी मूल समस्या है, यह सिर्फ एक उदाहरण है जो दिखाता है कि जावास्क्रिप्ट काम कर रहा है)। – Pablo

Google मानचित्र एक div

उत्तर

संबंधित मुद्दे