Có bao giờ bạn triển khai bản đồ Google Maps cho trang web của mình mà gặp phải trường hợp bản đồ chỉ tải được 1 phần rồi ngừng không tải nữa làm cho bản đồ trên trang web chỉ hiển thị 1 phần, phần còn lại thì bị trắng tinh (như hình bên dưới), thậm chí không thể tải được bản đồ dù chạy demo trên 1 trang trắng thì hiển thị bình thường.
Sau một thời gian quan sát thì mình nhận thấy rằng tình trạng này xảy ra là do phần bản đồ này bạn thiết lập tại 1 vùng ẩn (display:none) hoặc trong 1 thẻ tab ẩn. Đặc tính của Google Maps là nó chỉ tải khi phần này hiển thị ra bên ngoài. Đó là lý do tại sao dù cùng 1 code nhưng khi chèn web demo (1 trang trắng) thì chạy OK nhưng khi bỏ web vị trí cần chèn thì lại không hiển thị gì (không có lỗi xung đột gì với các ứng dụng chạy Javascript khác). Còn trường hợp chỉ tải được 1 phần của bản đồ là do khi đang tải thì bất ngờ bị dừng tải do thẻ này tự nhiên bị ẩn (thường gặp trong các trường hợp chạy các ứng dụng jQuery tạo tab hoặc accordion).
Vậy các khắc phục ra sao. Đơn giản là để cho nó tải xong thì mới gán thuộc tính ẩn cho nó. Mình xin chia sẻ 3 cách mình đã từng làm và đã khắc phục hoàn toàn tình trạng này.
Cách 1: Dùng $(window).load(function(){});
Đây là đoạn mã dùng để gọi lệnh khi trang web đã hoàn toàn tải xong hết. Mình sẽ đặt câu lệnh gọi thuộc tính ẩn hoặc chạy dòng lệnh gọi các jQuery khởi tạo hiện ứng tab hay accordion trong đây. Vậy là khi trang web tải xong hoàn toàn thì mới gán hoặc chạy nên đảm bảo là Google Maps đã được tải đầy đủ.
Không hiểu sao cách này mình dùng cho vài trường hợp thì nó chạy tốt nhưng lại có vài trường hợp thì nó hoàn toàn không có tác dụng. Đặc biệt là trang web có chứa nhiều bản đồ Google Maps. Thử cách 2 xem sao.
Cách 2: Gọi lệnh khởi tạo bản đồ khi muốn dùng
Thông thường hàm để khởi tạo Google Maps thường là hàm initialize(). Nhiều người muốn tối ưu mã thì thường viết chung tất cả các phương thức tạo bản đồ vào chung 1 hàm này rồi gọi 1 lần để chạy tất cả. Lời khuyên là nên viết mỗi bản đồ 1 hàm riêng.
Ví dụ: initialize_map1(); initialize_map2(); initialize_map3();…
Vậy là nếu muốn hiển thị bản đồ 1 bạn gọi hàm initialize_map1(), muốn hiển thị bản đồ 2 bạn gọi initialize_map2()… Với cách này bạn sẽ tối ưu cho quá trình tải trang lúc đầu khi không phải gọi hết các hàm. Tuy nhiên chúng ta sẽ gặp trường hợp như sau: ví dụ bạn có 3 thẻ tab chứa 3 bản đồ vậy là cứ mỗi lần chuyển tab là nó lại được gọi khởi tạo lại 1 lần… Cũng mệt đó :v. Nhưng ta có thể kiểm soát việc tải này thông qua một biến kiểm tra nếu nó đã gọi lại 1 lần rồi thì thôi chẳng cần phải gọi nữa. Ôi thôi cũng code lằng nhằng lắm. Thử cách 3.
Cách 3: Kiểm tra chính xác quá trình tải của từng bản đồ thông qua hàm của Google Maps Javascript API
Vô tình trong 1 lần lang thang tìm giải pháp thì vô tình đọc thấy trên Stack Overflow một thành viên cho biết hàm hỗ trợ kiểm tra quá trình tải.
1 2 | google.maps.event.addListener(map, "idle", function(){}); // map là biến chứa bản đồ |
Đây là hàm mới được bổ sung cho phiên bản V3 của Google Maps API. Giờ thì ta chỉ cần đặt dòng lệnh cần thực thi (thêm thuộc tính ẩn,…) vào dòng lệnh này là được.
Đơn giản hiệu quả mà không hiểu sao đến V3 mới thấy :Devilish:
Trên đây là vài chia sẻ của mình. Có thể đúng có thể sai (riêng với mình thì chạy đúng tất :Approve: ) nên mong các bạn góp ý hoặc trao đổi thêm để cùng giải quyết.
Chúc các bạn thành công.
Huỳnh Mai Anh Kiệt
