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

Lần đầu nhận quà từ Shopify

Hura Apps là 1 trong những đối tác của Shopify được vinh dự Shopify chọn tham gia chương trình (Huấn luyện Thương mại) Commerce...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

Giới thiệu một số công nghệ, dịch vụ mà Hura Apps đang dùng cho mô hình SaaS

Hura Apps là nhóm phát triển các ứng dụng web hỗ trợ cho nền tảng Shopify. Hura Apps hoạt động theo mô hình SaaS....

Hành trình kiếm 500 triệu/tháng từ việc xuất bản ứng dụng lên Shopify App Store

Đây là câu chuyện của một lập trình viên người Pháp có tên Axel Hardy được chính anh chia sẻ trên Twitter của mình....

BẠN XEM CHƯA

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

Hàm PHP kiểm tra chuỗi có đúng định dạng của 1 tên miền

Hôm rồi mình có viết một công cụ bằng PHP làm số 1 việc. Trong đó người dùng sẽ phải truyền tham biến (parameter)...

Phận người đến sau

Tôi thương lắm cái phận làm người đến sau. Đến cả đau, còn phải đau sau một người đến trước. Tình yêu là thứ không...

Tạo hiệu ứng Parallax đơn giản cho trang web bằng CSS

Hiệu ứng Parallax theo mình thấy nó không mang nhiều ý nghĩa lắm nhưng nó tạo cảm giác... mượt mà cho trang web. Nhiều...

Pornhub ra mắt chiến dịch xem phim… sex để dọn sạch bờ biển

Nhằm nâng cao nhận thức của mọi người về việc ô nhiễm đại dương, Pornhub đã tạo ra chiến dịch Dirtiest Porn Ever và...