Zachowaj ukrytą mapę Google Maps v3, pokaż w razie potrzeby

Question

Czy istnieje sposób zapobiegania wyświetlaniu mapy Google Maps (JS, v3) od samego początku? Robię pewne wstępne przetwarzanie i chciałbym pokazać moje "ładowanie" spinnera, dopóki wszystko nie pójdzie dobrze (bardziej wymownie umieścić, ukryć mapę - np. Pojemnik div - do zakończenia całego przetwarzania wstępnego - w którym momencie , pokaż mapę).

Podejście do zdarzenia na mapie idle nie pomaga tak bardzo, ponieważ mapa jest już wyświetlana po trafieniu tego zdarzenia.

wiem, że pojemnik div dostaje inline tytułowana przez GMaps po załadunku, moim pierwszym pomysłem było usunąć atrybut style (podczas słuchania przypadku idle), ale byłoby interesujące zobaczyć, czy istnieje sposób, tworzenia mapy i jej wyświetlania dopiero po zakończeniu wstępnego przetwarzania.

Może za pomocą argumentu do konstruktora new google.maps.Map lub MapOption?

Jakieś przemyślenia na ten temat?

Z góry dziękuję!

Answer 1

Należy również pamiętać, aby zadzwonić:

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

jeśli uległy zmianie rozmiaru <div>. A display:none<div> nie ma rozmiaru.

Answer 2

lepszy sposób:

gmap.redraw = function() { 
    gmOnLoad = true; 
    if(gmOnLoad) { 
     google.maps.event.trigger(gmap, "resize"); 
     gmap.setCenter(gmlatlng); 
     gmOnLoad = false; 
    } 
} 

i show-click imprezy:

$("#goo").click(function() { 
    if ($("#map_canvas").css("display") == "none") { 
    $("#YMapsID").toggle(); 
    $("#map_canvas").toggle(); 
    if (gmap != undefined) { 
     gmap.redraw(); 
    } 
    } 
}); 

Answer 3

w zależności od tego, co robisz kolejny posibility może być posiadanie wielu bools ustawione na true, gdy każdy proces odbywa .

Na przykład:

jeśli masz uruchomiony serwis geocode którego chcesz czekać, możesz mieć var ​​nazywa GeoState

i w części wynikowej zbioru geocoder GeoState true, następnie sprawdź funkcję, czy wszystkie usługi powróciły do ​​stanu true, gdy mają, sprawiają, że mapa jest widoczna.

Answer 4

To działa dla mnie. Używam biblioteki JQuery.

$(document).ready(function(){ 
    $('#Checkbox').click(function(){ 
     $('#googleMapDiv').toggle(); 
     initialize(); // initialize the map 
    }); 
}); 

Answer 5

Lub możesz po prostu ukryć to jak z css visablility lub css nieprzezroczystości.

$("#GoogleMap").css({ opacity: 0, zoom: 0 }); 
initialize(); 

google.maps.event.addListener(map,"idle", function(){ 
    $('#Loader').hide(); 
    $("#GoogleMap").css({ opacity: 1, zoom: 1 }); 
}); 

Answer 6

to działa dobrze dla mnie, używam kart jquery

setTimeout(function() { 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(new google.maps.LatLng(default_lat, default_lng)); 
     map.setZoom(default_map_zoom); 
    }, 2000); 

om ten link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 7

To będzie działać

google.maps.event.addListener(map, "idle", function() 
    { 
     google.maps.event.trigger(map, 'resize'); 
    });