AngularJS: ánh xạ qua API Google Maps v3 trong tab

Question

Tôi đang cố gắng tạo trang bằng tab (sử dụng AngularJS). Có một bản đồ (API Google Maps v3) ở một trong các tab đó. Khi bản đồ nằm trong tab ở phía trước, mọi thứ có vẻ ổn. Nhưng khi bản đồ được tải trong tab nền và chỉ hiển thị sau khi tab được nhấp vào bản đồ bị thất lạc/cắt bỏ và khi bạn cố gắng thao tác với nó, chức năng của nó dường như bị hỏng.

Tôi đã tìm kiếm các giải pháp và tôi thấy những thủ đoạn với

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

nhưng nó không làm việc. Bạn có thể xem http://jsfiddle.net/n4q7Y/5/ và cho tôi biết những gì tôi đã bỏ lỡ không?

Cảm ơn bạn.

Answer 1

Chờ một khoảnh khắc trước khi bạn kích hoạt các resize -event: http://jsfiddle.net/doktormolle/aAeZw/

Answer 2

cảm ơn bạn Dr.Molle, nếu tôi có thể cải thiện nó một chút, trong trường hợp của tôi một $ timeout không chậm trễ thực hiện công việc một cách hoàn hảo (vì nó sẽ chờ cho đến khi kết thúc $ tiêu hóa chu kỳ)

$timeout(function() { 
    // in my case 
    initializeMap(); 
    // OR this case: 
    google.maps.event.trigger(map, 'resize');      
}, 1000); // with or without delay