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

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

Hướng dẫn tải video ngắn Facebook Reel miễn phí

Facebook Reels là tính năng video ngắn mới của Facebook. Nếu bạn muốn tải những video ngắn này của mọi người thì bạn có...

Lập Trình Viên 25 Tuổi Kiếm Được $30.000 Mỗi Tháng Từ Các Ứng Dụng Shopify

Mat De Sousa là một doanh nhân Pháp, anh là người đứng sau 2 ứng dụng Shopify là Wide Bundles và WideReview do chính...

BẠN XEM CHƯA

Website cung cấp mã bưu chính của tất cả các địa phương trên thế giới

Khi đăng ký một số dịch vụ trên mạng chắc hẳn không ít lần bạn sẽ yêu cầu nhập mã bưu chính (postcode, zipcode)....

Trung tâm dữ liệu của Cơ quan an ninh quốc gia Hoa kỳ hứng chịu 300 triệu cuộc tấn công mỗi ngày

Hệ thống máy tính ban đang trải qua một cuộc tấn công mạng lớn lên đến 300 triệu lượt tấn công mỗi ngày và...

Kích hoạt tính năng tắt âm thanh cho từng tab trên Google Chrome

Google Chrome đã chính thức cung cấp tính năng cho phép người dùng được tắt âm thanh trên từng tab riêng biệt (trước kia...

Liên hoan lân, sư, rồng Tp.Quy Nhơn – 2015

Liên hoan lân, sư, rồng Tp.Quy Nhơn diễn ra ngày 22/02/2015 tức mùng 4 tết Ất Mùi tại quảng trường Quy Nhơn Huỳnh Mai Anh Kiệt

Hack website Giáo hội Phật giáo Bình Định

Nhàn cư vi bất thiện nên lang thang và vô tình phát hiện lỗi bảo mật website Giáo hội Phật giáo Bình Định (www.phatgiaobinhdinh.com)....