Hiển thị bản đồ Google từ một khu vực ẩn

Question

Tôi thực sự hy vọng ai đó có thể tư vấn về việc hiển thị bản đồ google từ một div ẩn.

Tôi có một bản đồ google mà tôi muốn hiển thị cho người dùng nếu họ nhấp vào liên kết tức là, Hiển thị bản đồ.

Đặt bản đồ trong một div ẩn chỉ không hoạt động chút nào vì vậy tôi đã đi với ẩn bản đồ -1000px trên một giá trị css tuyệt đối.

Điều này đã cho tôi kết quả tốt hơn nhiều nhưng khi tôi sử dụng css để đưa bản đồ trở lại chỉ có nó cho thấy.

http://screencast.com/t/MTMyOGZmNW

bất cứ ai có thể cho tôi tư vấn về cách tốt nhất để có một bản đồ ẩn trở thành có thể nhìn thấy sau khi tôi peform một chương trình?

Hy vọng ai đó có thể tư vấn.

Cảm ơn

Answer 1

Bạn không cần phải bận tâm với vị trí tuyệt đối và tất cả điều đó. Hãy div được ẩn cho đến khi cần thiết, sau đó hiển thị nó và gọi google.maps.event.trigger(map, 'resize') (v3) hoặc map.checkResize() (v2)

kịch bản bổ sung nêu trong ý kiến:

Đảm bảo bạn gọi google.maps.event.trigger(map, 'resize') TRƯỚC gọi map.fitBounds() hoặc bạn sẽ nhận được kết quả bất ngờ .

Answer 2

Bạn đã thử gọi sự kiện thay đổi kích thước của bản đồ chưa?

Google Maps API - Map

Answer 3

Tại sao không hoãn hiển thị bản đồ cho đến khi div được hiển thị?

đang thô:

$("button").click(function() { 
    $(mapDiv).show(); 
    new google.maps.Map(mapDiv, opts); 
});