Giữ Bản đồ Google Maps v3 bị ẩn, hiển thị khi cần

Question

Có cách nào để ngăn bản đồ Google Maps (JS, v3) hiển thị từ khi di chuyển không? Tôi đang thực hiện một số quy trình xử lý trước và muốn hiển thị trình quay 'Đang tải' của mình cho đến khi mọi thứ tốt đẹp (đặt rõ hơn, ẩn bản đồ - ví dụ: vùng chứa div - cho đến khi tất cả quá trình xử lý trước hoàn tất - tại thời điểm đó , hiển thị bản đồ).

Gắn kết sự kiện idle của bản đồ không giúp được gì nhiều, vì bản đồ đã được hiển thị khi sự kiện này xảy ra.

Tôi biết rằng vùng chứa div được tạo kiểu nội tuyến bằng GMaps sau khi tải, ý tưởng đầu tiên của tôi là xóa thuộc tính style (trong khi nghe sự kiện idle), nhưng sẽ rất thú vị nếu có cách nào tạo bản đồ và không hiển thị bản đồ cho đến khi tất cả quá trình xử lý trước được thực hiện.

Có thể bằng cách sử dụng đối số cho hàm dựng new google.maps.Map hoặc MapOption?

Bất kỳ suy nghĩ nào về điều này?

Cảm ơn bạn trước!

Answer 1

Cũng nên nhớ để gọi:

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

nếu bạn đã thay đổi kích thước của <div>. A display:none<div> không có kích thước. cách

Answer 2

tốt hơn:

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

và trong chương trình kích sự kiện:

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

Answer 3

tùy thuộc vào những gì bạn đang làm posibility khác có thể có nhiều bools bạn thiết lập là true khi mỗi quá trình được thực hiện .

Ví dụ:

nếu bạn có một dịch vụ mã địa lý đang chạy mà bạn muốn chờ đợi, bạn có thể có một var gọi GeoState

và trong phần kết quả của geocoder bộ GeoState true, sau đó có chức năng kiểm tra thời gian nếu tất cả các dịch vụ đã trả về true, khi chúng có, làm cho bản đồ hiển thị.

Answer 4

Điều này phù hợp với tôi. Tôi đang sử dụng thư viện JQuery.

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

Answer 5

Hoặc bạn chỉ có thể ẩn nó như với độ ổn định css hoặc độ mờ đục css.

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

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

Answer 6

này hoạt động tốt đối với tôi, tôi sử dụng các tab 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 liên kết này https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

Answer 7

này sẽ làm việc

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