Google modalny problem z mapą

Question

Próbuję wyświetlić mapę google w modalizatorze bootstrap na Twitterze. Gdy użytkownik kliknie najpierw na przycisk Show map, będzie mógł zobaczyć mapę z powodzeniem, ponieważ generuję funkcję mapy onclick(), ale kiedy zamknie modal i ponownie go otworzy, mapa nie będzie wyświetlać się poprawnie, a 90% części mapy stanie się szara jak po

i nawet próbować tego obejścia, które usuwają że cały div, w których mapa jest związać i zregenerować go jednak, że sztuczka doesnot pracy zbyt łaskawie dać mi znać jak mogę rozwiązać mój problem.

Poniżej moja funkcja js który Wołam onclick wydarzenie Pokaż mapę

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


} 

życzliwej pomocy,

Dzięki

Answer 1

Od ładujesz mapę w niebędącego jeszcze zdefiniowane element szerokości masz to rozwiązanie.

powinien wyzwalać zdarzenia zmiany rozmiaru na google.maps po zainicjować mapę z LatLong

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

Answer 2

Pracuję z kątowe, a co dopiero pracował dla mnie, na ui.bootstrap.collapseAngularUI dyrektywy jest użycie limit czasu. Ta dyrektywa ma ten sam problem co modały, ponieważ rozmiar mapy nie jest zdefiniowany, dopóki nowy widok nie zostanie w pełni załadowany, a mapa pojawi się w szarych strefach. To, co zrobiłem, to dodać ten kod do przycisku otwierającego zwiniętą treść. Może dostosujesz go do swojej skrzynki za pomocą przycisku otwierającego modal.

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

Mam nadzieję, że to pomaga.

Answer 3

Jeśli używasz kątowe, należy użyć $ Timeout zamiast setTimeout. Zawijanie funkcji z wartością $ timeout ustawioną na 0 zapewnia, że ​​funkcja zawijana jest wykonywana po zakończeniu bieżącego kontekstu wykonania. W twojej sytuacji Google Maps API odświeży mapę po modale, a element trzymający mapę zostanie w pełni wyrenderowany. Nie zobaczysz żadnych szarych obszarów.

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

Answer 4

Miałem ten sam problem. ale znalazłem problem z modalnym pokazanym wydarzeniem. ponieważ nie działa z jakąś wersją wydania, więc po prostu podążam za modalną dokumentacją bootstrap, aby to osiągnąć.

Bootstrap Modal Mapa Problem Rozwiązanie:

$(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)); 
    }); 
}); 

Wreszcie Działa to na mnie, to może pomóc komuś.

Answer 5

Można używać visibility:hidden i visibility:visible zamiast display:none i display:block. To działało dla mnie. Możesz nawet edytować CSS modala do tego.

Answer 6

Jeśli używasz bootstrap 3 trzeba to zrobić:

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

Również upewnić się, że nie określa żadnego max-width lub wartości max-height IMG - tagi. Jeśli tak to w arkuszu stylów CSS umieścić to w końcu go:

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

nie jestem quiete pewien czy to jest konieczne, ale ustawienie wartości wysokości, aby div trzyma swoją mapę powinno być dobrze:

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

Złożyłem to z kilku dyskusji na temat stackoverflow.

Answer 7

Też miałem ten problem i wymyśliłem to łatwe rozwiązanie.

Poczekaj, aż moduł zostanie załadowany, a następnie ustaw funkcję timeOut na mapie.

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

jestem bardzo pewien, że zadziała w każdym przypadku.

Answer 8

Rozwiązałem ten problem dzięki odpowiedzi user1012181. Osobiście też lubię to czyste rozwiązanie CSS.

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

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

Answer 9

użyję uiGmapIsReady czekać DOM gotowy następnie wymusić zmiany rozmiaru mapy:

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

Answer 10

dobrze ten sposób odpowiedzi powyżej pomógł ale musiałem zadzwonić główną funkcję przy użyciu onclick.

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

function newMap() 

{

funkcja showMap() {

//your map function 

}

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

showMap(); }