Trang chủ Thủ thuật Khắc phục hiện tượng tải bản đồ Google Maps không ổn định

Khắc phục hiện tượng tải bản đồ Google Maps không ổn định

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).

Google Maps Javascript API

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.

Đâ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

- Advertisement -
Huỳnh Mai Anh Kiệthttps://anhkiet.biz
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên cho Hura Apps - một startup nhỏ về công nghệ tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

Binance Launchpad có dễ… húp như bạn tưởng

Tiền kỹ thuật số (cryptocurrency) đang dần mở rộng. Kể ra mình biết khái niệm này từ rất lâu. Nếu các bạn là độc...

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

BẠN XEM CHƯA

Website Viện kiểm sát nhân dân tỉnh Bình Định bị hacker tấn công

Theo thông tin đăng tải trên Zone-H thì vào ngày 18/4/2016 vừa qua website của Viện kiểm sát nhân dân tỉnh Bình Định bị...

5 đặc tính quý giá của dân nhậu

Can đảm: Biết rượu độc hại mà vẫn uống. Thật thà: Có bất kỳ chuyện gì trong lòng cũng đem ra… trình bày. Dũng cảm: Chuyện...

Khám phá và trải nghiệm vẻ đẹp hoang sơ của đảo Cù Lao Xanh – Quy Nhơn

Cù Lao Xanh là địa điểm du lịch thích hợp cho những ai yêu thích kiểu du lịch bụi, muốn khám phá, trải nghiệm...

Google ra mắt trang web cung cấp tài liệu hỗ trợ phát triển hệ điều hành Fuchsia

Đối với Google, ý tưởng xây dựng hệ điều hành thế hệ tiếp theo của họ đã bắt đầu. Tại hội nghị Google I/O...

Green Cafe – Quy Nhơn

Một quán cà phê với không gian rộng với phong cách bài trí lạ và đặc biệt là rất... xanh Green Cafe Quy Nhơn Địa chỉ:...