Google मानचित्र मोडल समस्या

Question

मैं ट्विटर बूटस्ट्रैप मोडल में Google मानचित्र प्रदर्शित करने की कोशिश कर रहा हूं। जब उपयोगकर्ता पहले Show map बटन पर क्लिक करता है तो वह नक्शा सफलतापूर्वक देख सकता है क्योंकि मैं नक्शा onclick() फ़ंक्शन उत्पन्न कर रहा हूं लेकिन जब वह मोडल बंद कर देता है और इसे फिर से खोलता है तो नक्शा ठीक से प्रदर्शित नहीं होता है और मानचित्र का 9 0% हिस्सा ग्रे हो जाता है

निम्नलिखित की तरह मैं भी इस समाधान को निकालने कि जिसमें पूरे div नक्शा बाध्य है और यह पुनर्जीवित करने की कोशिश लेकिन वह चाल doesnot काम भी कृपया मुझे पता है कि मैं मेरी समस्या का समाधान कर सकते हैं।

बाद

मेरी जे एस समारोह जो मैं onclick मानचित्र की घटना

function mapp() 
{ 

//google.maps.event.trigger(map, "resize"); 
    //$("#map_google_canvas").empty(); 
$("#map_google_canvas").remove(); 

$("#crmap").append("<div id='map_google_canvas'></div>") 


    var myOptions = { 
     center: new google.maps.LatLng(54, -2), 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

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

     var addressArray = new Array("London, United Kingdom", "London Road, Brentwood, United Kingdom", "Brentwood, United Kingdom"); 


    var geocoder = new google.maps.Geocoder(); 

    var markerBounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < addressArray.length; i++) { 
     geocoder.geocode({ 
      'address': addressArray[i] 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location 
       }); 
       markerBounds.extend(results[0].geometry.location); 
       map.fitBounds(markerBounds); 
      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    } 


} 

कृपया मदद बोल रहा हूँ,

धन्यवाद

Answer 1

के बाद से आप एक गैर अभी तक परिभाषित में नक्शा लोड कर रहे हैं है चौड़ाई तत्व आपके पास यह समाधान है।

आप google.maps पर एक आकार बदलने घटना को ट्रिगर करने के बाद

$('.modal').on('shown', function() { 
    // also redefine center 
    map.setCenter(new google.maps.LatLng(54, -2)); 
    google.maps.event.trigger(map, 'resize'); 
}) 

Answer 2

मैं कोणीय के साथ काम कर रहा हूँ, और क्या बस, मेरे लिए काम किया है ui.bootstrap.collapseAngularUI निर्देश पर उपयोग करने के लिए है LatLong साथ मानचित्र आरंभ एक टाइमआउट इस निर्देश में मॉडलों के समान समस्या है क्योंकि नए आकार को पूरी तरह से लोड होने तक नक्शा आकार परिभाषित नहीं किया गया है, और नक्शा भूरे रंग के क्षेत्रों के साथ प्रकट होता है। मैंने जो किया है वह इस कोड को उस बटन पर जोड़ना है जो ढह गई सामग्री को खोलता है। शायद आप इसे अपने मामले में मोडल खोलने वाले बटन के साथ अनुकूलित कर सकते हैं।

window.setTimeout(function() { 
    google.maps.event.trigger(map, 'resize') 
}, 0); 

उम्मीद है कि यह मदद करता है।

Answer 3

आप कोणीय का उपयोग कर रहे हैं, तो आप का उपयोग करना चाहिए $ समयबाह्य बजाय की setTimeout। एक $ टाइमआउट सेट 0 के साथ फ़ंक्शन को लपेटने से यह सुनिश्चित होगा कि मौजूदा निष्पादन संदर्भ समाप्त होने के बाद लपेटा गया फ़ंक्शन निष्पादित किया गया हो। आपकी स्थिति में Google मानचित्र API केवल मॉडल के बाद मानचित्र को पुनर्निर्मित करेगा और मानचित्र को धारण करने वाला तत्व पूरी तरह से प्रस्तुत किया जाएगा। आपको कोई ग्रे क्षेत्र नहीं दिखाई देगा।

$timeout(function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(53.5085011, -6.2154598);); 
}, 0); 

Answer 4

मुझे एक ही समस्या थी। लेकिन मुझे मोडल दिखाए गए कार्यक्रम के साथ एक समस्या मिली। क्योंकि यह समस्या के कुछ संस्करण के साथ काम नहीं कर रहा है, इसलिए मैं इसे प्राप्त करने के लिए बस बूटस्ट्रैप मोडल दस्तावेज़ का पालन करता हूं।

बूटस्ट्रैप मोडल मानचित्र मुद्दा हल:

$(document).ready(function(){ 
    $('#locationMap').on('shown.bs.modal', function(){ 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(-33.8688, 151.2195)); 
    }); 
}); 

अंत में यह मेरे लिए काम करता है, यह किसी से मदद कर सकता है।

Answer 5

visibility:hidden और visibility:visibledisplay:none और display:block के बजाय उपयोग किया जा सकता है। यह मेरे लिए काम किया। आप इसके लिए मोडल के सीएसएस को भी संपादित कर सकते हैं।

Answer 6

आप बूटस्ट्रैप 3 उपयोग कर रहे हैं तो आप इस करना है:

function showMap() { 
     var mapOptions = { 
      zoom: 12, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), 
      mapOptions); 
     $('#mapmodal').on('shown.bs.modal', function() { 
       google.maps.event.trigger(map, 'resize'); 
       map.setCenter(new google.maps.LatLng(54, -2)); 
      }); 
     $('#mapmodal').modal("show"); 
} 

यह भी सुनिश्चित करें कि आप किसी भी अधिकतम-चौड़ाई या img को अधिकतम ऊँचाई मान सेट नहीं था कि बनाना - टैग। आप अपने सीएसएस शैली पत्रक में वैसा ही किया, तो यह के अंत में इस डाल:

#map img{ 
    max-width:none; 
    max-height:none; 
} 

मैं Quiete यकीन नहीं है कि यह आवश्यक लेकिन div अपने नक्शे पकड़े एक अच्छी बात होना चाहिए के लिए ऊँचाई मान की स्थापना है नहीं कर रहा हूँ:

<div id="map" style="height:400px"></div> 

मैंने इसे कई स्टैक ओवरफ्लो चर्चाओं से इकट्ठा किया।

Answer 7

मुझे यह समस्या भी थी और इस आसान समाधान के साथ आया।

प्रतीक्षा करें जब तक कि आपका मोडल पूरी तरह से लोड नहीं हो जाता है और फिर समय फ़ंक्शन को मानचित्र फ़ंक्शन पर सेट करें।

$('#MyModal').on('loaded.bs.modal',function(e){ 
    setTimeOut(GoogleMap,500); 
}); 

मुझे पूरा यकीन है कि यह सभी मामलों में काम करेगा।

Answer 8

मैंने इस समस्या को हल किया user1012181 उत्तर के लिए धन्यवाद। मैं व्यक्तिगत रूप से इस शुद्ध सीएसएस समाधान को भी पसंद करता हूं।

div#myModalMap.modal.fade.in{  
    visibility: visible; 
} 

div#myModalMap.modal.fade{ 
    display: block; 
    visibility: hidden; 
} 

Answer 9

मैं uiGmapIsReady डोम तो नक्शा आकार बदलने के लिए मजबूर तैयार इंतजार का उपयोग करेगा:

uiGmapIsReady.promise().then(function() { 
 
    var map = $scope.map.control.getGMap(); 
 
    google.maps.event.trigger(map, 'resize'); 
 
});

Answer 10

अच्छी तरह से यह कैसे ऊपर जवाब में मदद मिली है, लेकिन मैं मुख्य समारोह कॉल करने के लिए किया था onclick का उपयोग कर।

<span data-target="#enlargeModal"data-toggle="modal" onclick="newMap()" class="fa fa-expand r"></span> 

function newMap() 

{

समारोह showMap() {

//your map function 

}

$('#enlargeModal').on('shown.bs.modal', function() { 
      var center = fullmap.getCenter(); 
      google.maps.event.trigger(fullmap, 'resize'); 
      fullmap.setCenter(center); 
    }); 

showMap(); }