Giao dịch được bổ sung chi tiết

Tổng quan

Hãy sử dụng hướng dẫn này để tìm hiểu cách so khớp một vị trí với một người bán cụ thể và hiển thị thông tin chi tiết về người bán.

Khi bạn phát hành bảng sao kê giao dịch viết tắt như "ACMEHCORP", khách hàng của bạn có thể thấy khó hiểu. Điều này có thể dẫn đến các khoản phí bị khiếu nại và chi phí hỗ trợ bổ sung cho bạn. Thay vào đó, bạn nên cung cấp tên đầy đủ của người bán, chẳng hạn như Acme Housewares.

Tính năng Giao dịch phong phú giúp bạn dễ dàng cung cấp thông tin giao dịch trực quan, bao gồm tên đầy đủ của người bán, danh mục kinh doanh, hình ảnh mặt tiền cửa hàng, cũng như thông tin liên hệ và thông tin vị trí. Điều này giúp tăng tính minh bạch, cải thiện chỉ số đo lường mức độ hài lòng của khách hàng (NPS) và tăng thời gian người dùng dành cho ứng dụng của bạn.

Màn hình di động mẫu so sánh bảng sao kê giao dịch thô với thông tin chi tiết về người bán được bổ sung
Màn hình mẫu về giao dịch được bổ sung thông tin (nhấp để phóng to)

Bật API

Để triển khai Giao dịch phong phú, bạn phải bật các API sau trong Google Cloud Console. Các đường liên kết sau đây sẽ mở Google Cloud Console để bạn có thể bật từng API cho dự án đã chọn:

Để biết thêm thông tin về cách thiết lập, hãy xem bài viết Bắt đầu sử dụng Google Maps Platform.

Các phần trong hướng dẫn triển khai

Hướng dẫn này đề cập đến các cách triển khai và tuỳ chỉnh sau:

So khớp người bán với Google Maps Platform Liên kết một người bán trong nhật ký giao dịch với một địa điểm trong Google Maps Platform.
Hiển thị thông tin chi tiết về người bán Hiển thị các giao dịch có nhiều dữ liệu kèm theo thông tin hữu ích về người bán để khách hàng có thể nhanh chóng nhận ra giao dịch.
Thêm bản đồ vị trí của người bán Thêm bản đồ về vị trí của người bán bằng điểm đánh dấu nâng cao.

So khớp người bán bằng Google Maps Platform

Ví dụ này sử dụng: Places API (Mới) Cũng có sẵn: JavaScript

Sơ đồ quy trình sau đây cho thấy cách ứng dụng của bạn so khớp các giao dịch của người bán để trả về kết quả bằng cách sử dụng Place Details từ cơ sở dữ liệu hiện có của người bán hoặc thông qua yêu cầu Tìm kiếm văn bản:

Sơ đồ quy trình so khớp hồ sơ giao dịch của người bán với Mã địa điểm và Place Details
Ma trận quy trình so khớp người bán (nhấp để phóng to)

Lấy mã địa điểm trên Google Maps Platform

Bạn có thể có một cơ sở dữ liệu về người bán với thông tin cơ bản như tên và địa chỉ doanh nghiệp. Để nhận thông tin mà Google Maps Platform có về địa điểm đó, bao gồm cả thông tin liên hệ và điểm xếp hạng do khách hàng đóng góp, hãy tìm mã địa điểm tương ứng với từng người bán trong cơ sở dữ liệu của bạn.

Để lấy mã địa điểm của một doanh nghiệp, hãy gọi đến điểm cuối Tìm kiếm văn bản (Mới) trong Places API (Mới) và chỉ yêu cầu trường places.id trong mặt nạ trường. Thao tác này sẽ kích hoạt SKU Thông tin cơ bản về tìm kiếm văn bản (Chỉ mã nhận dạng). Nếu người bán có nhiều địa điểm, hãy thêm tên thành phố hoặc tên đường cùng với tên người bán vào cụm từ tìm kiếm. Xác thực kết quả được trả về để xác nhận rằng kết quả đó khớp với người bán.

Ví dụ sau đây yêu cầu mã địa điểm cho văn phòng Google Đài Bắc bằng cách sử dụng tên người bán và thành phố:

curl -X POST -d '{
  "textQuery" : "Google Taipei"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

Mã địa điểm của cửa hàng

Để lưu trữ thông tin từ Google Maps Platform về người bán cho các yêu cầu trong tương lai, bạn có thể lưu trữ mã địa điểm vô thời hạn trong cơ sở dữ liệu của mình dưới dạng một thuộc tính trong bản ghi của người bán. Bạn chỉ cần chạy yêu cầu Tìm kiếm văn bản (Mới) một lần cho mỗi người bán hoặc bạn có thể tìm mã địa điểm bất cứ khi nào khách hàng yêu cầu thông tin chi tiết về giao dịch.

Để đảm bảo mã địa điểm được lưu trữ luôn chính xác, hãy làm mới mã địa điểm 12 tháng một lần bằng cách gửi yêu cầu Chi tiết địa điểm (Mới) chỉ chỉ định trường id trong mặt nạ trường.

Nếu Place Details mà bạn hiển thị không khớp với người bán mà khách hàng đã hoàn tất giao dịch, thì Google khuyên bạn nên cho phép khách hàng gửi ý kiến phản hồi về chất lượng của kết quả so khớp người bán.

Hiện thông tin về người bán

Ví dụ này sử dụng: Places API (Mới) Cũng có sẵn: Places SDK cho Android | Places SDK cho iOS | Thư viện Địa điểm, API JavaScript của Maps

Bạn có thể chia sẻ Place Details mà khách hàng cần sau khi họ ghé thăm một địa điểm của người bán. Sau khi gọi điểm cuối Place Details (Mới) trong Places API (Mới), bạn có thể lọc và hiển thị phản hồi trong một cửa sổ thông tin, thanh bên web hoặc chế độ xem chi tiết trên thiết bị di động trong giới hạn của Điều khoản dịch vụ của Google Maps Platform.

Chế độ xem chi tiết giao dịch trên thiết bị di động cho thấy tên, địa chỉ, bản đồ và thông tin liên hệ của người bán
Màn hình thông tin chi tiết mẫu về người bán (nhấp để phóng to)

Để gửi yêu cầu đến điểm cuối Place Details, bạn cần có Mã địa điểm cho từng vị trí. Hãy xem bài viết Lấy mã địa điểm trên Nền tảng Google Maps để truy xuất mã địa điểm của một vị trí của người bán.

Yêu cầu Chi tiết địa điểm (Mới) sau đây trả về tên hiển thị, địa chỉ được định dạng, toạ độ, trang web, số điện thoại, biểu tượng, giờ mở cửa và điểm xếp hạng ở định dạng JSON cho mã địa điểm Google Taipei 101:

curl -X GET -H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: displayName,formattedAddress,location,websiteUri,nationalPhoneNumber,iconMaskBaseUri,regularOpeningHours,rating' \
'https://places.googleapis.com/v1/places/ChIJraeA2rarQjQRyAqIxkx2vN8'

Nếu đang xây dựng một ứng dụng web bằng API JavaScript của Maps, bạn cũng có thể sử dụng lớp Địa điểm để tìm nạp các trường tương tự trên ứng dụng:

const place = new google.maps.places.Place({
  id: "ChIJraeA2rarQjQRyAqIxkx2vN8",
});

await place.fetchFields({
  fields: [
    "displayName",
    "formattedAddress",
    "location",
    "websiteURI",
    "nationalPhoneNumber",
    "regularOpeningHours",
    "rating",
  ],
});

Thêm bản đồ về vị trí của người bán

Ví dụ này sử dụng: Maps JavaScript API | Geocoding API | Maps Static API Cũng có trên: Android | iOS

Xác định vị trí của người bán

Bạn có thể đặt điểm đánh dấu trên bản đồ bằng cách sử dụng toạ độ địa lý từ thông tin chi tiết về địa điểm. Nếu cơ sở dữ liệu người bán của bạn có địa chỉ đường phố không có toạ độ địa lý và bạn không yêu cầu thông tin chi tiết về địa điểm, thì bạn có thể sử dụng Geocoding API để chuyển đổi địa chỉ đường phố thành toạ độ vĩ độ và kinh độ ở phía máy chủ, lưu trữ các toạ độ đó trong cơ sở dữ liệu và làm mới các toạ độ đó ít nhất 30 ngày một lần.

Ví dụ sau đây sử dụng Geocoding API để lấy vĩ độ và kinh độ cho Mã địa điểm của văn phòng Google Đài Bắc:

```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJraeA2rarQjQRyAqIxkx2vN8&key=YOUR_API_KEY
```

Thêm điểm đánh dấu nâng cao trên bản đồ web

Vì khách hàng xem bản đồ để xác nhận giao dịch thay vì duyệt xem hoặc điều hướng, hãy định cấu hình bản đồ của bạn với khả năng tương tác hạn chế và đặt một điểm đánh dấu nâng cao tại vị trí của người bán. Điểm đánh dấu nâng cao yêu cầu phải có mã bản đồ và thư viện marker (libraries=marker).

Trước tiên, hãy tải Maps JavaScript API bằng libraries=marker và thêm vùng chứa div cho bản đồ:

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap"></script>
<div id="map" style="height: 300px; width: 100%;"></div>

Tiếp theo, hãy khởi chạy bản đồ bằng gestureHandling: "none" và zoomControl: false để giới hạn khả năng tương tác, cung cấp mapId và tạo google.maps.marker.AdvancedMarkerElement tại toạ độ của người bán:

function initMap() {
  const merchantLocation = { lat: 25.033976, lng: 121.5645389 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: merchantLocation,
    zoom: 16,
    mapId: "DEMO_MAP_ID",
    gestureHandling: "none",
    zoomControl: false,
  });

  new google.maps.marker.AdvancedMarkerElement({
    map,
    position: merchantLocation,
    title: "Google Taipei",
  });
}

Bạn cũng có thể tuỳ chỉnh điểm đánh dấu nâng cao bằng cách thay đổi màu nền, đường viền hoặc ký tự của ghim, hoặc bằng cách cung cấp hình ảnh đồ hoạ tuỳ chỉnh cho danh mục của người bán.

Thêm hình ảnh bản đồ tĩnh

Nếu bạn muốn có hình ảnh bản đồ không tương tác cho web dành cho thiết bị di động hoặc máy tính, hãy tạo một URL Maps Static API có một điểm đánh dấu duy nhất tại toạ độ vĩ độ và kinh độ hoặc địa chỉ của người bán. Maps Static API trả về phiên bản hình ảnh của bản đồ bằng các tham số bạn chỉ định.

Yêu cầu sau đây trả về một bản đồ đường có kích thước 640x480 pixel, được căn giữa trên một điểm đánh dấu màu đỏ tại văn phòng Google Đài Bắc với kiểu bản đồ dựa trên đám mây:

```html
https://maps.googleapis.com/maps/api/staticmap?size=640x480&markers=color:red%7C25.033976%2C121.5645389&map_id=b224095f76859890&key=YOUR_API_KEY&signature=BASE64_SIGNATURE
```

Bảng sau đây mô tả từng phần của yêu cầu:

URL API https://maps.googleapis.com/maps/api/staticmap?
Kích thước hình ảnh size=640x480
Điểm đánh dấu vị trí của người bán (sử dụng mã hoá URL) markers=color:red%7C25.033976%2C121.5645389
Định kiểu bản đồ dựa trên đám mây map_id=b224095f76859890
Khoá API key=YOUR_API_KEY
Chữ ký số (tìm hiểu cách ký chữ ký số vào yêu cầu của bạn) signature=BASE64_SIGNATURE

Yêu cầu này tạo ra hình ảnh bản đồ tĩnh sau:

Bản đồ tập trung vào văn phòng Google tại Đài Bắc, có điểm đánh dấu vị trí màu đỏ

Bạn cũng có thể truyền một địa chỉ làm vị trí của điểm đánh dấu:

```html
https://maps.googleapis.com/maps/api/staticmap?size=640x480&markers=color:green%7CTaipei%20101%20Tower%2CNo.%207信義路五段信義區台北市%20Taiwan%20110&map_id=b224095f76859890&key=YOUR_API_KEY&signature=BASE64_SIGNATURE
```

Để biết thêm các lựa chọn tham số, hãy xem tài liệu về Maps Static API.

Thêm bản đồ vào ứng dụng di động

Nếu đang sử dụng Maps SDK cho Android hoặc SDK bản đồ dành cho iOS, bạn có thể đặt điểm đánh dấu nâng cao bằng cách sử dụng toạ độ từ Place Details.

Vì khách hàng xem bản đồ để xác nhận giao dịch chứ không phải để duyệt xem hoặc điều hướng, hãy định cấu hình bản đồ có khả năng tương tác hạn chế: