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

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

स्रोत

2013-05-02 Anonymous

कि देने की कोशिश div एक आईडी देख सकते हैं कि क्या आप के लिए करता है, Ive कभी नहीं है कि समस्या मैं गूगल के साथ काम किया था ... –

@AaronRussell: कुछ नहीं, क्या होता है यह अभी भी दिखाई नहीं दे रहा है। –

ठीक है एचएम ... 'शैली = "चौड़ाई जोड़ें: 100%; ऊंचाई: 100%;" div को देखने के लिए क्या टैट करता है ... (नक्शा div को नहीं, बाहरी div में) –

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

नहीं #map_canvas लेकिन मुख्य div

उदाहरण के लिए

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

यहाँ पर कुछ अन्य उत्तर की व्याख्या कर रहे हैं यही कारण है कि इस के लिए आवश्यक है

स्रोत

2013-05-02 23:52:44

हाय आपका समाधान मेरे लिए काम नहीं करता है http://stackoverflow.com/questions/42823800/google-map-appears-after-browser-size-changes कृपया प्रश्न –

समस्या प्रतिशत आकार के साथ है:

यहाँ नेस्टेड div के साथ मेरे कोड है। आप मूल div (नया एक) के आकार को परिभाषित नहीं कर रहे हैं, इसलिए ब्राउज़र आकार को Google मानचित्र API में रिपोर्ट नहीं कर सकता है। रैपर div को एक विशिष्ट आकार, या प्रतिशत आकार देना यदि उसके माता-पिता का आकार निर्धारित किया जा सकता है, तो काम करेगा।

this explanation from Mike Williams' Google Maps API v2 tutorial देखें:

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

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

HTML करने के लिए 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>

स्रोत

2013-05-02 23:50:33 geocodezip

जादूगर

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

स्रोत

2013-05-02 23:51:17

मेरे लिए, बस ऊंचाई जोड़ना पर्याप्त था (div शून्य ऊंचाई के साथ बाहर आ रहा था) –

लेकिन क्या आपको नहीं लगता कि 'पीएक्स' निर्दिष्ट करना प्रतिक्रिया को परेशान करेगा – ImranNaqvi

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

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

स्रोत

2013-09-24 14:09:55

पर एक नज़र डालें, यह मेरे लिए '

' के लिए काम करता है, इनलाइन लाइन के बिना यह रिश्तेदार स्थिति में डिफ़ॉल्ट था और एक खाली स्क्रीन प्रदर्शित करता था। धन्यवाद! –

मेरे मामले में मुझे भूरे रंग की पृष्ठभूमि मिल रही थी और यह मानचित्र विकल्पों में ज़ूम मान को शामिल करने के लिए बाहर निकला। हाँ, कोई मतलब नहीं है।

स्रोत

2014-12-06 20:55:57

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

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

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

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

स्रोत

2017-03-16 22:47:27 wilaponce

फिक्स्ड

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

#map { 
    height: 100%; 
} 

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

स्रोत

2017-04-26 14:44:09 Yergalem

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

उत्तर

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