Szary obszar na mapach Google

Question

Mam zaimplementowane mapy Google w mojej aplikacji (w trybie modalnym), jednak jak widać na poniższych zdjęciach jest szary obszar, którego oczywiście chcę się pozbyć. Możliwe jest przesunięcie mapy w taki sposób, że szary obszar znika, ale to nie powinno być potrzebne.

Chodzi o to, że mapa jest wyświetlana wewnątrz modalnego pudełka, które zawiera wiele treści, które są dynamicznie tworzone po kliknięciu przycisku pokazania modalu. Wydaje się, że problem może być, że zawartość mapa nie jest w pełni załadowany przed modalna jest załadowany, ale nie jestem pewien ...

HTML:

... 
    <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); 
     }); 
    }); 

Obrazek 1:

Obraz 2:

Answer 1

Zwykle powodem, dlaczego tak się dzieje jest to, że wielkość zmienia się po mapie mapa została zainicjowana. Jeśli z jakiegoś powodu zmienić rozmiar div z id = „map” trzeba wyzwolić „Resize” zdarzenie

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

Można tylko próbować wywołać zdarzenie w konsoli JavaScript i zobaczyć czy to pomaga .

Należy pamiętać, że ta odpowiedź to domysły, ponieważ w zasadzie nie ma nic, z czym można by poradzić sobie w pracy, więc proszę dać mi znać, jeśli to nie pomoże.

Answer 2

Szukałem rozwiązania od jakiegoś czasu. Miałem dokładnie te same problemy i nie jestem jedyny. Linia powyższego kodu nie była wystarczająca, ale zauważyłem, że ręczne zmienianie rozmiaru mojej przeglądarki naprawiało problem. Jeśli to również rozwiązuje twoje, to oto w jaki sposób mogę rozwiązać mój:

1) Dodaj to na końcu swojej funkcji, inicjując mapę. Doda odbiornik i wywoła funkcję po załadowaniu mapy. Będzie to zasadniczo symulować zmianę rozmiaru.

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

miałem, aby pojawiło się mapa po rozmiaru

2) Utwórz słuchacza rozmiaru, dzwoniąc na mapie google rozmiaru zdarzenie tak:

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

miałem również umieścić mapę podróży zainicjuj funkcję ... Wiem, że to nie jest najlepsze rozwiązanie, ale działa na razie. Nie przejmuj się wywołaniem resize().

Wygląda na to, że jest związany z ukrytym elementem div zawierającym mapę google. Też znalazłem podobne rozwiązanie na this website jfyi. Powodzenia!

Answer 3

Ten pracował dla mnie:

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

podjętą z linku, który @Bruno wspomniano

Answer 4

put google.maps.event.trigger (mapa "rozmiar"); w funkcji setTimeout, która uruchamia się po wydaniu zdarzenia.