Google मानचित्र में ग्रे क्षेत्र

Question

मैंने अपने ऐप (मोडल में) में Google मानचित्र लागू किए हैं, हालांकि आप नीचे दी गई छवियों पर देख सकते हैं, जहां एक ग्रे क्षेत्र है जिसे मैं निश्चित रूप से छुटकारा पाना चाहता हूं। मानचित्र को स्थानांतरित करना संभव है ताकि ग्रे क्षेत्र गायब हो जाए, लेकिन इसकी आवश्यकता नहीं होनी चाहिए।

बात यह है कि नक्शा एक मॉडल बॉक्स के अंदर दिखाया गया है, जिसमें मोडल दिखाने के लिए बटन क्लिक होने पर गतिशील रूप से बनाई गई बहुत सारी सामग्री शामिल होती है। ऐसा लगता है समस्या हो सकती है कि कि नक्शे की सामग्री पूरी तरह से पहले मोडल लोड किया जाता है लोड नहीं है, लेकिन मुझे यकीन है कि नहीं कर रहा हूँ ...

एचटीएमएल:

... 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Test</h3> 
    </div> 
    <div id="modal-left" class="modal-body left"></div> 
    <div class="modal-body right"> 
     <div id="map"></div> 
    </div> 
    </div> 
    ... 

js:

function initializeMap(latitude, longitude) { 
     var place = new google.maps.LatLng (latitude, longitude); 

     var myOptions = { 
      zoom: 10, 
      center: place, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

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

    $('.modal-btn').click(function(){ 
     var producerId = $(this).attr('id'); 

     GetProducer(producerId, function(data) { // <--- data retrieved through ajax 
      initializeMap(data.latitude, data.longitude); 

      var titel = data.name; 

      var content = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" + 
         "<p>" + data.name + ", " + data.address + "<br/>" + 
         data.zipcode + " " + data.town + "</p>" + 
         "<p><a href='" + data.url + "' >" + data.url + "</a></p>"; 

      $('#myModalLabel').html(titel); 
      $('#modal-left').html(content); 
     }); 
    }); 

छवि 1:

छवि 2:

Answer 1

सामान्य कारण है कि यह हो रहा है कि नक्शे के आकार के बाद नक्शा प्रारंभ कर दिया गया है बदल जाता है। आप किसी कारण से आईडी के साथ div के आकार को बदलते हैं = "नक्शा" आप "का आकार बदलने के" घटना

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

को गति प्रदान करने की जरूरत है तुम बस अगर यह मदद करता है अपने JavaScript कंसोल में घटना को ट्रिगर और देखने के लिए कोशिश कर सकते ।

कृपया ध्यान दें कि यह उत्तर एक अनुमान है क्योंकि इस प्रश्न में वास्तव में कुछ भी काम नहीं है, इसलिए अगर यह मदद नहीं करता है तो कृपया मुझे बताएं।

Answer 2

मैं थोड़ी देर के लिए समाधान ढूंढ रहा हूं। मुझे वही समस्याएं थीं और मैं अकेला नहीं हूं। उपरोक्त कोड की रेखा पर्याप्त नहीं थी, लेकिन मैंने देखा कि मैन्युअल रूप से मेरे ब्राउज़र का आकार बदलना समस्या को ठीक कर रहा था। यदि यह तुम्हारा भी हल करता है, तो यहां मैं अपना हल हल करता हूं:

1) अपने मानचित्र को आरंभ करने के अपने कार्य के अंत में इसे जोड़ें। यह इसमें एक श्रोता जोड़ देगा और मानचित्र लोड होने पर फ़ंक्शन को कॉल करेगा। यह मूल रूप से एक आकार बदलना अनुकरण करेगा।

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    $(window).resize(); 
    map.setCenter(yourCoordinates); 
}); 

मैं recenter करने के लिए नक्शे

2 का आकार बदलने के बाद) एक आकार बदलने श्रोता बनाएं था, गूगल मानचित्र बुला इस तरह घटना का आकार बदलने:

$(window).resize(function() { 
    if ($("#map_canvas").children().length > 0){  
     if (map) 
     google.maps.event.trigger(map, 'resize'); 
    }}); 

मैं भी बाहर नक्शा लगानी थी मेरी कार्य शुरू करें ... मुझे पता है कि यह सबसे अच्छा समाधान नहीं है लेकिन यह अभी के लिए काम करता है। आकार बदलें() कॉल के बारे में चिंता न करें।

ऐसा लगता है कि यह Google मानचित्र युक्त छिपे हुए div से संबंधित है। मुझे this website jfyi पर भी एक समान समाधान मिला। शुभकामनाएँ!

Answer 3

यह मेरे लिए काम किया:

var center = map.getCenter(); 
// . . . your code for changing the size of the map 
google.maps.event.trigger(map, "resize"); 
map.setCenter(center); 

लिंक से लिया, @Bruno उल्लेख किया है कि

Answer 4

रखें google.maps.event.trigger (मानचित्र, "आकार परिवर्तन"); एक सेटटाइम फ़ंक्शन में ताकि ईवेंट ट्रिगर होने के बाद आग लग जाए।