Google Maps Platform giúp khách hàng phát triển các trải nghiệm độc đáo bằng cách tuỳ chỉnh thiết kế hình ảnh của điểm đánh dấu trên bản đồ bằng Đ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 động dựa trên dữ liệu theo thời gian thực.
Điểm đánh dấu trên bản đồ là một công cụ hữu ích để mang đến trải nghiệm bản đồ phong phú cho người dùng. Các thuộc tính của đ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êm thông tin 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 một cách linh động và nhà phát triển có thể muốn bản đồ trực quan hoá được cập nhật, duy trì cảm giác mới mẻ cho người dùng.
Trong tài liệu này, chúng tôi sử dụng một ví dụ để minh hoạ: một chuỗi bán lẻ muốn sử dụng bản đồ để cung cấp thời gian chờ tại cửa hàng cho người dùng. Tuy nhiên, bạn có thể sử dụng cùng một cấu trúc này cho nhiều trường hợp sử dụng khác. Sau đây là một số ý tưởng khác:
- Tình trạng phòng của khách sạn: trên bản đồ hiển thị kết quả tìm kiếm khách sạn, tình trạng phòng mới nhất là một 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 quỹ phòng giảm dần.
- Tình trạng còn chỗ đỗ xe: trên bản đồ bãi đỗ xe, hãy giúp người dùng tự tin chọn một điểm đến có chỗ đỗ xe khi họ đến.
- Nhà hàng đang mở, sắp đó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 hay không.
Giải pháp điểm đánh dấu nâng cao động
Bạn có thể tạo bản đồ bằ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ẻ tận dụng hệ thống quản lý hàng đợi thanh toán để ước tính và trực quan hoá thời gian chờ cho 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 ta chỉ muốn hiển thị một thuộc tính: thời gian chờ hiện tại tại mỗi vị trí cửa hàng, được 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 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 trong quy cách PinElement. Bạn cũng có thể sử dụng HTML tuỳ chỉnh để có thêm nhiều tuỳ chọn tuỳ chỉnh phong phú.
Trong ví dụ này, chúng ta 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 điểm đánh dấu: màu xanh lam cho thời gian chờ dưới 5 phút, màu vàng cho thời gian chờ lâu 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 nguồn dữ liệu và giải pháp phù hợp sẽ 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, trong đó chúng ta yêu cầu dữ liệu thời gian chờ đã cập nhật bằng các yêu cầu HTTP (REST) một cách thường xuyên. Trong các phần sau, bạn sẽ thấy 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 tận dụng Cloud Functions cho Firebase. Cloud Functions cho phép chúng ta xác định một hàm phụ trợ để truy cập và tính toán dữ liệu này. Chúng ta cũng đưa thư viện Firebase vào ứng dụng web để có thể truy cập vào Hàm trên đám mây bằng một yêu cầu HTTP.
Bước tiếp theo là đảm bảo chúng ta luôn cung cấp dữ liệu mới cho người dùng. Để làm việc này, chúng ta thiết lập một bộ hẹn giờ bằng cách sử dụng hàm setInterval của JavaScript với thời gian chờ là 30 giây. Mỗi khi bộ hẹn giờ được kích hoạt, chúng tôi sẽ yêu cầu dữ liệu thời gian chờ mới 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 các điểm đánh dấu trên 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 trên bản đồ
Giờ đây, chúng ta có thể sử dụng Điểm đánh dấu nâng cao để hiển thị các điểm đánh dấu được tạo kiểu trên bản đồ. Bạn có thể hiển thị điểm đánh dấu nâng cao trên bản đồ do API JavaScript của Maps trên Nền tảng Google Maps tạo. Khi sử dụng điểm đánh dấu nâng cao, hãy nhớ thêm thông số mã bản đồ vào yêu cầu bản đồ JS.
Trong đoạn mã dưới đây, chúng ta tạo các đ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 một 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. Mã bên dưới đọc dữ liệu thời gian chờ đã cập nhật và chỉ định kiểu cho từng ghim 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 để hiển thị thời gian chờ mới nhất cho người dùng:
Các cách thay thế để 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 ta sẽ xem xét hai phương án thay thế là Giải pháp gửi thông báo qua đám mây của Firebase và Websocket. Dù bạn chọn phương pháp nào, hãy nhớ cân nhắc các yếu tố dưới đây để công cụ bản đồ của bạn luôn hoạt động hiệu quả:
- Tần suất cập nhật
- Lượng dữ liệu
- Số lượng điểm đánh dấu trong chế độ xem bản đồ
- Khả năng của phần cứng và trình duyệt
Giải pháp gửi thông báo qua đám mây của Firebase
Giải pháp 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 thông tin cập nhật đến ứ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 một hàm gọi lại có mục đích là 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à cấu trúc này yêu cầu duy trì kết nối máy chủ liên tục cho mỗi trình duyệt chạy ứng dụng bản đồ. Vì lý do đó, việc chạy có thể tốn kém hơn và có thể kém hiệu quả hơn trong bối cảnh các vấn đề về kết nối.
WebSockets
WebSockets là một phương pháp khác dựa trên phương thức đẩy để luôn cập nhật dữ liệu. Tương tự như trường hợp 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 đồ. Về bản chất, các lợi ích về chức năng của phương pháp này 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 làm thêm một số việc để định cấu hình cơ sở hạ tầng cần thiết.
Kết luận
Nhà phát triển có thể kết hợp các nguồn dữ liệu theo thời gian thực với Điểm đánh dấu nâng cao để tạo hình ảnh trực quan trên Google Maps. Có một số 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ư dung lượng dữ liệu. Sau đó, bạn có thể sử dụng dữ liệu tích hợp để kiểm soát giao diện của Điểm đánh dấu nâng cao theo thời gian thực, mang đến trải nghiệm linh động cho người dùng.
Hành động tiếp theo
Tài liệu đọc thêm:
- Bút đánh dấu nâng cao – Trung tâm nhà phát triển của Google
- Tạo điểm đánh dấu bằng HTML tuỳ chỉnh
- Cloud Functions 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