javascript - जब एक div टैग में घोंसला होता है तो मानचित्र Google मानचित्र जावास्क्रिप्ट एपीआई v3 पर प्रदर्शित नहीं होता है




google-maps-api-3 (5)

मैं div डालने की कोशिश कर रहा हूं जो नक्शा दिखाता है ( <div id="map-canvas"></div> ) किसी अन्य div अंदर, लेकिन यह उस तरह से नक्शा नहीं दिखाता है। क्या यह एक सीएसएस या जावास्क्रिप्ट समस्या है? या यह एपीआई काम करता है?

नेस्टेड div के साथ मेरा कोड यहां दिया गया है:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
    </script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div> <!-- ommiting this div will show the map -->
        <div id="map-canvas"></div>
    </div>
</body>
</html>

FIXED

मैं आपको नहीं बता सकता कि इस मामूली चीज़ ने मुझे ठीक करने के लिए घंटे क्यों लगाए; Div की आरंभिक ऊंचाई दें और अपनी शैली में प्रतिशत में ऊंचाई निर्दिष्ट करें;

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div> 

जादूगर

क्या आपने अतिरिक्त div की ऊंचाई और चौड़ाई निर्धारित करने का प्रयास किया है, मुझे पता है कि जेएस पर काम कर रहे एक प्रोजेक्ट पर div में कुछ भी नहीं डालेगा जब तक कि मेरे पास ऊंचाई और चौड़ाई पहले से सेट न हो।

मैंने आपके कोड का उपयोग किया और ऊंचाई और चौड़ाई को कड़ी मेहनत की और यह मेरे लिए दिखाई देता है और इसके बिना यह नहीं दिखाता है।

<body>
    <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
         <div id="map-canvas"></div>
    </div>
</body> 

मैं या तो इसे हार्ड कोडिंग या div को एक आईडी निर्दिष्ट करने की अनुशंसा करता हूं और फिर इसे अपनी सीएसएस फ़ाइल में जोड़ता हूं।


मैं बस जो जोड़ना चाहता हूं उसे जोड़ना चाहता हूं, मैंने दोनों divs के लिए ऊंचाई और चौड़ाई जोड़ा और इसे उत्तरदायी बनाने के लिए बूटस्ट्रैप का उपयोग किया

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

col-lg-1 लिए काम करने के लिए Here स्थित बूटस्ट्रैप संदर्भ जोड़ें


मैंने इस समस्या को हल किया:

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>

style="width:100%; height:100%;" जोड़ें style="width:100%; height:100%;" div को देखने के लिए क्या करता है

#map_canvas पर नहीं बल्कि मुख्य div

उदाहरण

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body> 

यहां कुछ अन्य उत्तर दिए गए हैं जो समझाते हैं कि यह क्यों जरूरी है





google-maps-api-3