Google मानचित्र ग्रे

Question

मैं HTML और जावास्क्रिप्ट का उपयोग कर मोबाइल एप्लिकेशन में Google मानचित्र का उपयोग कर रहा हूं। जब मैं नक्शा लोड करता हूं तो मैं ऊपरी बाएं कोने में मानचित्र का 5% देख सकता हूं। Div कंटेनर का 9 5% ग्रे है। जब मैं फायरबग के साथ div को देखना चाहता हूं तो पूरा नक्शा अचानक लोड हो जाता है। वह क्या हो सकता है? मैंने पहले से ही कई स्टैक ओवरफ्लो धागे की कोशिश की लेकिन मेरे लिए कोई समाधान नहीं हुआ। धन्यवाद।

कोड:

<link type="text/css" rel="stylesheet" href="jquery.mobile...> 
<link type="text/css" rel="stylesheet" href="index.css"> 
<script type="text/javascript" src="jquery.mobile...></script> 
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script> 
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">  </script> 
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8" src="index.js"></script> 

<div id="map" style="width: 700px; height: 700px;"></div> 

var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: new google.maps.LatLng(-33.92, 151.25), 
     mapTypeId: google.maps.MapTypeId.ROADMAP         
}); 

index.js

$(document).ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
}); 

जब मैं div विशेषताओं% में मापा का उपयोग करें या उन्हें यह बिल्कुल भी काम नहीं करता।

Answer 1

भी दस्तावेज़ तैयार पर आकार बदलने विधि कॉल करके देखें:

$(document).ready(function() { 
    $(window).resize(function() { 
     google.maps.event.trigger(map, 'resize'); 
    }); 
    google.maps.event.trigger(map, 'resize'); 
}); 

Answer 2

अपने mapOptions जाँच करें कि क्या इसके केंद्र या अन्य गुणों सही हैं। मेरे अवसर में, केंद्र की संपत्ति Google मानचित्र द्वारा अनजान थी; हालांकि पृष्ठ सीएसएस और जेएसपी के मामले में पूरी तरह से त्रुटिहीन था, लेकिन यह मुझे हर समय सिर्फ भूरे रंग का नक्शा दिखाता था।

Answer 3

मेरे मामले के लिए, बस map.refresh() पर कॉल करने से इस समस्या को ठीक किया गया। मैं जीएमपीएस का उपयोग कर रहा हूँ।

Answer 4

यह मेरे साथ हुआ क्योंकि MapTypeId NULL था।

प्रयास करें:

map.setMapTypeId("roadmap"); 

Answer 5

मेरे मामले में मैं देशांतर जो एक बाहरी एपीआई से आया है प्रदान करने के लिए छोड़ दिया है। एक बार एपीआई को रेखांश शामिल करने के लिए तय किया गया था, तो समस्या हल हो गई थी।

Answer 6

मैं एक ऐसी ही सवाल का उपयोग कर angular 5
मैं केवल मानचित्र रीफ़्रेश/एक setTimeoutऔर का उपयोग करके पुन: बनाने के लिए मिल सकता है था एक setZoom (भले ही स्तर में ही है)

// set timeout. 
setTimeout(() => { 
    console.log("attempting refresh"); 
    google.maps.event.trigger(this.map, "resize"); 
    this.map.setZoom(8); 
}, 
100); 

Working Plunker Here

ताज़ा करने के बारे में क्या आकर्षक है, यह है कि यह मानचित्र को दूसरी बार प्रदर्शित करता है। Google मानचित्र स्पष्ट रूप से bug free नहीं है।