Хранить карту Google Maps v3 скрытой, показывать при необходимости

Есть ли способ предотвратить отображение карты Google Maps (JS, v3) с момента запуска? Я делаю предварительную обработку и хотел бы показать свой счетчик "Загрузка", пока все не будет хорошо (красноречиво положить, скрыть карту - например, контейнер div), до тех пор, пока вся предварительная обработка не будет завершена - на в котором указывается карта).

Подсчет события карты idle не очень помогает, так как карта уже отображается, когда это событие попадает.

Я знаю, что контейнер div становится встроенным в GMaps после загрузки, моя первая идея заключалась в том, чтобы очистить атрибут style (при прослушивании события idle), но было бы интересно посмотреть если есть способ создания карты и не отображать ее до тех пор, пока не будет выполнена вся предварительная обработка.

Возможно, используя аргумент для конструктора new google.maps.Map или MapOption?

Любые мысли об этом?

Заранее благодарю вас!

Ответ 1

Также не забудьте позвонить:

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

если вы изменили размер <div>. A display:none <div> не имеет размера.

Ответ 2

Или вы можете просто скрыть это, как с помощью css visablility или css opacity.

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

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

Ответ 3

Это работает для меня. Я использую библиотеку JQuery.

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

Ответ 4

это отлично работает для меня, я использую вкладки 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 ссылку https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Ответ 5

Это будет работать

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

Ответ 6

лучший способ:

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

и в событии click click:

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

Ответ 7

в зависимости от того, что вы делаете, другая возможность может состоять в том, чтобы иметь несколько правил bools, которые вы установили true, когда каждый процесс завершен.

Например:

если у вас есть работа с геокодом, которую вы хотите подождать, вы можете иметь var GeoState

и в результате часть геокодера установила GeoState в true, затем установите функцию времени, чтобы проверить, вернулись ли все службы, когда они есть, сделать карту видимой.

Ответ 8

другой способ показать скрытую карту, когда карта первый раз отдавая <div>, чтобы установить стиль: видимость.

Когда сперва скрыто, используйте visibility = hidden; показать использование visibility = visible

причина: visibility: hidden означает, что содержимое элемента будет невидимым, но элемент останется в своем исходном положении и размере.