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

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
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 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

- Advertisment -
Shopify

BÀI VIẾT MỚI

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

reCAPTCHA rất hữu ích trong số hoá dữ liệu

Sách được xem là những kho tàng tri thức của nhân loại, tuy nhiên việc lưu trữ sách là cả một vấn đề to...

The Pirate Bay đã trở lại bằng tên miền ban đầu

Sau khi The Pirate Bay bị "chết" đội ngũ đã gửi tất cả lưu lượng truy cập đến "lỗ đen" (Local Black Hole 127.0.0.1.)và...

Dân Anh đốt cột phát sóng 5G vì nghi phát tán virus Corona

Ít nhất ba cột phát sóng 5G vừa bị đốt cháy vì có người tin rằng nó là nguồn phát tán virus corona. Theo BBC,...

Kiểm tra trình duyệt của khách có phải là Safari bằng PHP

Hôm rồi chợt nhận ra điều là Safari của Apple chưa hỗ trợ hiển thị ảnh WebP. Vậy là cái plugin Hura Apps Photos...

BẠN XEM CHƯA

Hãy lái xe bằng cả trái tim

Tôi đã không dám bấm vào nút play để xem clip vụ đâm xe tàn khốc khiến 3 người chết. Khi ấy, tôi không yếu...

Ra mắt chuyên trang rao vặt miễn phí trên Mạng Bình Định

Với mong muốn giúp người kinh doanh, cung cấp dịch vụ giới thiệu sản phẩm đến người dùng trên Mạng Bình Định nên Ban...

Tối ưu hóa đường dẫn cho trang web dễ dàng với .htaccess

Rewrite URL là một kỹ thuật cho phép ghi lại địa chỉ website (URL) từ dạng này thành một dạng khác. Rewrite URLs (đôi...

Quản lý và cập nhật các phần mềm trên máy tính dễ dàng với USSU Unlimited

Máy tính của bạn cài đặt vô số phần mềm tiện ích và để đảm bảo các phần mềm này luôn được cập nhật...

Cài nhanh font vào máy tính chạy Windows

Nếu máy tính của bạn đang chạy Windows 10 thì việc cài đặt thêm font chữ là cực kỳ đơn giản. Cụ thể bạn...