2014-05-20 8 views
5

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

enter image description here

से पहले के बाद तत्व हैं।

enter image description here

कोड यहाँ है

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
</head> 

<body> 


    <input type="text" id="latitude" placeholder="latitude"> 
    <input type="text" id="longitude" placeholder="longitude"> 
    <div id="map" style="width:500px; height:500px"></div> 


    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    <script> 
     function initialize() { 
      var $latitude = document.getElementById('latitude'); 
      var $longitude = document.getElementById('longitude'); 
      var latitude = -25.363882; 
      var longitude = 131.044922; 
      var zoom = 7; 

      var LatLng = new google.maps.LatLng(latitude, longitude); 

      var mapOptions = { 
       zoom: zoom, 
       center: LatLng, 
       panControl: false, 
       zoomControl: false, 
       scaleControl: true, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      var map = new google.maps.Map(document.getElementById('map'), mapOptions); 


      var marker = new google.maps.Marker({ 
       position: LatLng, 
       map: map, 
       title: 'Drag Me!', 
       draggable: true 
      }); 

      google.maps.event.addListener(marker, 'dragend', function (marker) { 
       var latLng = marker.latLng; 
       $latitude.value = latLng.lat(); 
       $longitude.value = latLng.lng(); 
      }); 


     } 
     initialize(); 
    </script> 

</body> 

</html> 
+1

कुछ कोड दिलचस्प होगा –

+0

जोड़ा गया कोड स्पष्ट रूप से कोड नहीं है जो स्क्रीनशॉट –

+0

में मानचित्र बनाने के लिए उपयोग किया गया है, बस अपने 'प्रारंभिक' फ़ंक्शन को सीधे कॉल न करें। (, खिड़की, 'लोड' से प्रारंभ) 'google.maps.event.addDomListener;' – duncan

उत्तर

0

कॉल google.maps.event.trigger(map, "resize"); मानचित्र पर एक बार भरी हुई हो, चेक बेला डेमो,

DEMO

4

व्याख्या करने के लिए जब आप खोलने क्या होता है देव उपकरण: खिड़की के व्यूपोर्ट-आकार में परिवर्तन, खिड़की की आग का आकार बदलने और मानचित्र के आकार की फिर से गणना की जाएगी। वही होगा जब आप किसी अन्य तरीके से विंडो का आकार बदलते हैं।

टैब के उपयोग (http://jsfiddle.net/KhwZS/1300/) करने के लिए संबंधित: नक्शे-टैब शुरू में छिपा हुआ है (मानचित्र आकार 0x0 है), विंडो के आकार-घटना ट्रिगर जब नक्शा-टैब सक्रिय हो गया है (जो नक्शा आकार की फिर से गणना) के लिए बाध्य करेगा:

$(".tabs").tabs({ 
    activate: function(event, ui) {if(ui.newPanel.has('#map-canvas')){ 
     google.maps.event.trigger(window,'resize',{});};} 
}); 

डेमो: http://jsfiddle.net/KhwZS/1476/

यह अभी स्पष्ट नहीं है जो कोड स्क्रीनशॉट मेरा उत्तर है में मानचित्र बनाता है के रूप में: ट्रिगर खिड़की या नक्शे के आकार-ईवेंट आप नक्शे

6

प्लेस दिखाने के मार्कर के बाद इस कोड को बनाया जाता है या नक्शा लोड:

google.maps.event.addListenerOnce(map, 'idle', function() { 

    google.maps.event.trigger(map, 'resize'); 

}); 

idle घटना निकाल दिया जाता है जब नक्शा पैनिंग के बाद निष्क्रिय हो जाने पर या ज़ूमिंग।

हम resize विधि का उपयोग कर रहे हैं के बाद नक्शा के निष्क्रिय हो जाने का मतलब है सभी लोड हो रहा है पूरा हो गया है। तो कोड नक्शा निष्क्रिय घटना (जब सभी प्रसंस्करण मानचित्र पर बंद हो गया है) के लिए इंतजार कर रहा है, तो यह resize विधि निष्पादित करता है, यह नक्शे को सही आयामों में दोहराता है।

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