Google मानचित्र API v3 मानचित्र पूरी तरह से लोड नहीं हो रहा है

Question

मुझे Google मानचित्र के साथ कुछ कठिनाई हो रही है।

पृष्ठ लोड करने के बाद, अगर मैं ब्राउज़र भी थोड़ी सी राशि का आकार बदलने, इस ताज़ा करने के लिए पूरा नक्शा और लोड का कारण बनता है: समस्या है कि केवल मानचित्र के एक छोटे से हिस्से के रूप में यहाँ दिखाया गया है लोड कर रहा है सही ढंग से, जैसा कि यहाँ दिखाया:

यहाँ मेरी जावास्क्रिप्ट कोड है:

google.maps.event.addDomListener(window, 'load', initialize); 

$(document).ready(function(){        
    var $width = document.getElementById("propertysection").offsetWidth; 
    $('#map-canvas-2').width($width-28-175); 
    $('#map-canvas-2').height($width); 
    $('#myGridMap').height($width); 
}); 

function initialize() { 
    var map; 
    var propertyMap; 
    var marker; 
    var infowindow; 
     var myOptions = { 
      zoom: 6, 
      center:new google.maps.LatLng(50.7,-86.05), 
      mapTypeId: google.maps.MapTypeId.HYBRID 
     } 
     map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);     
     infowindow = new google.maps.InfoWindow({ 
      content: 'Property Info', 
      position: new google.maps.LatLng(0, 0) 
     }); 
    } 

किसी को भी बता सकते हैं कि समस्या क्या हो सकता है? धन्यवाद।

Answer 1

आपको विंडो लोड ईवेंट के साथ jquery तैयार विधि को मिश्रण नहीं करना चाहिए (http://api.jquery.com/ready/ देखें)।

इसके बजाए, अपने .ready फ़ंक्शन के भीतर से प्रारंभ करें, या प्रारंभिक विधि में विंडो का आकार बदलें (मानचित्र को प्रारंभ करने से पहले)।

Answer 2

मैं बूटस्ट्रैप और मेगा मेनू का उपयोग कर रहा हूं और मैंने इसे आधिकारिक Google मानचित्र API एसिंक्रोनस लोड फ़ंक्शन का उपयोग करने के साथ हल किया है। https://developers.google.com/maps/documentation/javascript/tutorial#asynch

function initialize() { 

     var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373); 

     var map_canvas = document.getElementById('map_canvas'); 

     var map_options = { 
      center: new google.maps.LatLng(37.4221147, -122.0867373), 
      zoom: 12, 
        mapTypeControl: false, 
        panControl: false, 
      zoomControlOptions: { 
         position: google.maps.ControlPosition.LEFT_CENTER 
      }, 
      streetViewControl: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(map_canvas, map_options); 

     var contentString = 
      '<b>Google Gate Bridge</b>' + 
      '<p>Mountain View, CA 94043, USA</p>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
     }); 

     google.maps.event.addListener(marker, 'click', function(){ 
      infowindow.open(map,marker); 
     }); 

    } 

    function loadScript() { 
     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; 
     document.body.appendChild(script); 
    } 

    var tab = document.getElementById('YourHtmlObjectID'); 
    YourHtmlObjectID.onmouseover = loadScript; 
    YourHtmlObjectID.onclick = loadScript;