Nền tảng Google Maps cho phép khách hàng phát triển những trải nghiệm độc đáo bằng cách tuỳ chỉnh thiết kế trực quan của điểm đánh dấu bản đồ của họ thông qua Điểm đánh dấu nâng cao. Trong tài liệu này, chúng ta sẽ khám phá cách khách hàng có thể tiến thêm một bước và tạo các điểm đánh dấu thay đổi linh hoạt dựa trên dữ liệu theo thời gian thực.
Điểm đánh dấu bản đồ là công cụ hữu ích để cung cấp trải nghiệm lập bản đồ phong phú cho người dùng. Các thuộc tính điểm đánh dấu như kích thước, màu sắc và hình dạng có thể truyền tải thông tin bổ sung về từng vị trí được đánh dấu. Trong một số trường hợp, thông tin bổ sung này có thể thay đổi linh hoạt và nhà phát triển có thể muốn hình ảnh của bản đồ cập nhật, giúp duy trì cảm giác mới mẻ cho người dùng.
Trong bài viết này, chúng tôi sử dụng ví dụ để minh hoạ: một chuỗi bán lẻ muốn sử dụng bản đồ để cho người dùng thấy thời gian chờ tại cửa hàng. Tuy nhiên, cấu trúc này có thể được sử dụng cho nhiều trường hợp sử dụng khác. Dưới đây là một vài ý tưởng bổ sung:
- Tình trạng phòng của khách sạn: trên bản đồ cho thấy kết quả tìm kiếm khách sạn, độ mới của phòng là tín hiệu quan trọng, có thể khuyến khích người dùng đặt phòng khách sạn khi số lượng phòng trống.
- Tình trạng còn chỗ đỗ xe: trên bản đồ các bãi đỗ xe, giúp người dùng có thể yên tâm chọn điểm đến sẽ có chỗ đỗ xe khi họ đến.
- Nhà hàng mở cửa, đóng cửa và đóng cửa: trên bản đồ hiển thị kết quả tìm kiếm nhà hàng, điều quan trọng là người dùng phải biết liệu nhà hàng có thể đã đóng cửa khi họ đến nơi hay không.
Giải pháp điểm đánh dấu nâng cao động
Bây giờ, hãy cùng tìm hiểu cách xây dựng bản đồ bằng cách sử dụng điểm đánh dấu nâng cao để trực quan hoá dữ liệu động. Như đã đề cập trước đó, trường hợp sử dụng là một chuỗi cửa hàng bán lẻ sử dụng hệ thống quản lý hàng đợi thanh toán của họ để ước tính và trực quan hoá thời gian chờ của người dùng. Đây là cấu trúc ứng dụng:
Bước 1 – Xác định các thuộc tính để xác định trải nghiệm hình ảnh
Bước đầu tiên là xác định một hoặc nhiều thuộc tính vị trí để hiển thị cho người dùng. Trong trường hợp này, chúng tôi chỉ muốn hiển thị một cơ sở lưu trú: thời gian chờ hiện tại tại mỗi vị trí cửa hàng (tính bằng phút).
Bước tiếp theo là chọn một hoặc nhiều thuộc tính điểm đánh dấu tương ứng để chú thích trực quan thời gian chờ trên điểm đánh dấu trên bản đồ. Danh sách các thuộc tính điểm đánh dấu có sẵn ngay từ đầu trong thông số kỹ thuật PinElement. Bạn cũng có thể sử dụng HTML tuỳ chỉnh để có thêm nhiều lựa chọn tuỳ chỉnh phong phú.
Trong ví dụ này, chúng tôi sẽ sử dụng hai thuộc tính điểm đánh dấu để trực quan hoá dữ liệu thời gian chờ:
- Màu đánh dấu: màu xanh dương cho thời gian chờ dưới 5 phút, màu vàng cho thời gian chờ hơn 5 phút
- Nội dung điểm đánh dấu (yêu cầu điểm đánh dấu HTML tuỳ chỉnh): chúng tôi sẽ thêm thời gian chờ hiện tại tính bằng phút vào chính điểm đánh dấu
Bước 2 – Định cấu hình kết nối với nguồn dữ liệu theo thời gian thực
Có nhiều cách để kết nối với các nguồn dữ liệu và giải pháp phù hợp phụ thuộc vào trường hợp sử dụng và cơ sở hạ tầng kỹ thuật của bạn. Trong ví dụ này, chúng ta sử dụng phương pháp kéo (pull), trong đó chúng ta thường xuyên yêu cầu dữ liệu thời gian chờ cập nhật thông qua các yêu cầu HTTP (REST). Trong các phần sau, bạn sẽ tìm hiểu các cấu trúc thay thế tận dụng các phương pháp đẩy.
Để cho phép ứng dụng truy cập vào dữ liệu thời gian chờ từ máy chủ, cấu trúc của chúng tôi sử dụng Hàm đám mây cho Firebase. Chức năng đám mây cho phép chúng ta xác định chức năng phụ trợ để truy cập và tính toán dữ liệu này. Chúng tôi cũng đưa thư viện Firebase vào ứng dụng web để có thể truy cập vào Chức năng đám mây thông qua yêu cầu HTTP.
Bước tiếp theo là đảm bảo chúng ta luôn cập nhật dữ liệu cho người dùng. Để làm như vậy, chúng ta thiết lập bộ tính giờ bằng cách sử dụng hàm setInterval javascript với thời gian chờ là 30 giây. Mỗi lần bộ tính giờ được kích hoạt, chúng tôi yêu cầu dữ liệu thời gian chờ cập nhật như mô tả ở trên. Sau khi nhận được dữ liệu mới, chúng ta phải làm mới giao diện của điểm đánh dấu bản đồ. Bước tiếp theo sẽ trình bày chi tiết cách thực hiện những thay đổi đó.
Bước 3 – Kết xuất điểm đánh dấu bản đồ
Giờ đây, chúng ta có thể sử dụng Điểm đánh dấu nâng cao để hiển thị điểm đánh dấu cách điệu trên bản đồ. Điểm đánh dấu nâng cao có thể hiển thị trên bản đồ được tạo bằng API JavaScript của Maps của Nền tảng Google Maps. Khi sử dụng điểm đánh dấu nâng cao, hãy nhớ bao gồm tham số ID bản đồ trong yêu cầu bản đồ JS.
Trong đoạn mã được hiển thị bên dưới, chúng ta tạo điểm đánh dấu và xác định nội dung của điểm đánh dấu bằng cách tạo phần tử div HTML:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
Bước cuối cùng là cập nhật văn bản điểm đánh dấu và kiểu CSS cho từng cửa hàng. Đoạn mã dưới đây đọc dữ liệu về thời gian chờ đã cập nhật và gán kiểu cho từng mã pin của cửa hàng dựa trên thời gian chờ:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
Bản đồ hiện sử dụng API thời gian chờ hiện có của chúng tôi để trực quan hoá thời gian chờ cập nhật cho người dùng:
Các cách khác để kết nối với nguồn dữ liệu theo thời gian thực
Có nhiều cách để kết nối với các nguồn dữ liệu theo thời gian thực. Dưới đây, chúng tôi xem xét hai lựa chọn thay thế, Giải pháp gửi thông báo qua đám mây của Firebase và Websockets. Cho dù bạn chọn phương pháp tiếp cận nào, hãy nhớ xem xét các yếu tố dưới đây để công cụ bản đồ của bạn vẫn hoạt động hiệu quả:
- Tần suất cập nhật
- Khối lượng dữ liệu
- Số điểm đánh dấu trong chế độ xem bản đồ
- Các chức năng của trình duyệt và phần cứng
Giải pháp gửi thông báo qua đám mây của Firebase
Gửi thông báo qua đám mây của Firebase là một phương pháp đẩy. Khi sử dụng phương pháp này, bạn sẽ gửi nội dung cập nhật cho ứng dụng bản đồ mỗi khi dữ liệu thời gian chờ được cập nhật trên phần phụ trợ. Thông báo cập nhật sẽ kích hoạt hàm callback có mục đích cập nhật giao diện và nội dung của điểm đánh dấu.
Một điều cần cân nhắc trước khi chọn cấu trúc này là kiến trúc yêu cầu duy trì kết nối máy chủ liên tục cho mỗi trình duyệt đang chạy ứng dụng bản đồ. Do đó, phương pháp này có thể tốn nhiều chi phí hơn và có thể kém hiệu quả hơn trong trường hợp gặp vấn đề về khả năng kết nối.
WebSockets
WebSockets là một phương pháp dựa trên đẩy để giữ cho dữ liệu luôn mới. Tương tự như tình huống trước, bạn có thể sử dụng WebSocket để thiết lập kết nối liên tục giữa phần phụ trợ và ứng dụng bản đồ của bạn. Lợi ích chức năng của phương pháp này về bản chất tương tự như Giải pháp gửi thông báo qua đám mây của Firebase, tuy nhiên, bạn có thể phải thực hiện thêm một số thao tác để định cấu hình cơ sở hạ tầng cần thiết.
Kết luận
Các nhà phát triển có thể kết hợp nguồn dữ liệu theo thời gian thực với Điểm đánh dấu nâng cao để xây dựng hình ảnh trực quan trên Google Maps. Có một vài cách để kết nối các nguồn dữ liệu này, tuỳ thuộc vào yêu cầu của bản đồ, phần cứng và trình duyệt của người dùng cũng như khối lượng dữ liệu. Sau đó, dữ liệu tích hợp có thể được sử dụng để điều khiển giao diện của Điểm đánh dấu nâng cao theo thời gian thực, giúp mang lại một trải nghiệm linh động cho người dùng.
Hành động tiếp theo
Tài liệu đọc thêm:
- Điểm đánh dấu nâng cao – Trung tâm dành cho nhà phát triển của Google
- Tạo điểm đánh dấu bằng HTML tuỳ chỉnh
- Chức năng đám mây dành cho Firebase
- Gửi thông báo qua đám mây của Firebase
Người đóng góp
Tác giả chính:
Jim Leflar | Kỹ sư giải pháp nền tảng Google Maps
John Branigan | Kỹ sư khách hàng cấp cao của Google Cloud Platform
Steve Barrett | Kỹ sư giải pháp nền tảng Google Maps