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




google-maps-api-3 (7)

जादूगर

क्या आपने अतिरिक्त 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 को एक आईडी निर्दिष्ट करने की अनुशंसा करता हूं और फिर इसे अपनी सीएसएस फ़ाइल में जोड़ता हूं।

मैं 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>

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

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

FIXED

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

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></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 (नया एक) के आकार को परिभाषित नहीं कर रहे हैं, इसलिए ब्राउज़र आकार को Google मानचित्र API में रिपोर्ट नहीं कर सकता है। रैपर div को एक विशिष्ट आकार, या प्रतिशत आकार देना यदि उसके माता-पिता का आकार निर्धारित किया जा सकता है, तो काम करेगा।

माइक विलियम्स के Google मानचित्र एपीआई v2 ट्यूटोरियल से यह स्पष्टीकरण देखें:

यदि आप अपने मानचित्र div पर शैली = "चौड़ाई: 100%; ऊंचाई: 100%" का उपयोग करने का प्रयास करते हैं, तो आपको एक नक्शा div मिलता है जिसमें शून्य ऊंचाई होती है। ऐसा इसलिए है क्योंकि div <body> के आकार का प्रतिशत होने का प्रयास करता है, लेकिन डिफ़ॉल्ट रूप से <body> की अनिश्चित ऊंचाई होती है।

स्क्रीन की ऊंचाई निर्धारित करने के तरीके हैं और नक्शा div की ऊंचाई के रूप में पिक्सल की संख्या का उपयोग करें, लेकिन <body> को बदलने का एक आसान विकल्प है ताकि इसकी ऊंचाई पृष्ठ का 100% हो। हम <body> और <html> दोनों में शैली = "ऊंचाई: 100%" लागू करके ऐसा कर सकते हैं। (हमें इसे दोनों करना है, अन्यथा <body> दस्तावेज़ की ऊंचाई का 100% होने का प्रयास करता है, और उसके लिए डिफ़ॉल्ट अनिश्चित ऊंचाई है।)

अपने सीएसएस में 100% आकार एचटीएमएल और बॉडी में जोड़ें

    html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
    }

इसे किसी भी divs में इनलाइन जोड़ें जिसमें आईडी नहीं है:

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

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> 

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


मानों के समूह नामों का मैपिंग बनाकर शुरू करें। फिर अपने वांछित प्रारूप में बदल जाते हैं।

var myArray = [
    {group: "one", color: "red"},
    {group: "two", color: "blue"},
    {group: "one", color: "green"},
    {group: "one", color: "black"}
];

var group_to_values = myArray.reduce(function (obj, item) {
    obj[item.group] = obj[item.group] || [];
    obj[item.group].push(item.color);
    return obj;
}, {});

var groups = Object.keys(group_to_values).map(function (key) {
    return {group: key, color: group_to_values[key]};
});

var pre = document.createElement("pre");
pre.innerHTML = "groups:\n\n" + JSON.stringify(groups, null, 4);
document.body.appendChild(pre);

ऐरे इंस्टेंस विधियों जैसे कि reduce और map का उपयोग करना आपको शक्तिशाली उच्च स्तरीय संरचनाएं देता है जो आपको मैन्युअल रूप से लूपिंग के बहुत सारे दर्द को बचा सकता है।





javascript google-maps-api-3