Tổng quan
Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cung cấp các API dịch vụ web để lấy thông tin về địa điểm, đường đi và khoảng cách. Các mẫu trong hướng dẫn này được viết cho một nền tảng, nhưng các đường liên kết đến tài liệu được cung cấp để triển khai trên các nền tảng khác.
Trình tạo nhanh trong bảng điều khiển Google Cloud giúp bạn nhanh chóng tạo một công cụ định vị, bao gồm cả việc nhập trang thông tin trên Trang doanh nghiệp và tự động nhúng đường liên kết đặt lịch hẹn của nhà cung cấp bên thứ ba. Giao diện người dùng có tính tương tác giúp bạn tạo mã và triển khai lên Cloud chỉ trong vài phút.
Người dùng muốn nghiên cứu sản phẩm và dịch vụ trực tuyến, đồng thời tìm được vị trí thuận tiện và tốt nhất để ghé thăm, đặt lịch hẹn hoặc đến lấy hàng. Họ sẽ muốn đến vị trí của bạn nhanh nhất có thể và bạn sẽ muốn mang đến cho họ trải nghiệm trực tuyến phong phú để tăng số lượt ghé thăm vị trí thực tế, nâng cao mức độ hài lòng của người dùng và giảm số cuộc gọi hỗ trợ. Bạn cũng nên đo lường mức độ thành công của công cụ định vị để xác định xem khách hàng có thể tìm thấy vị trí của bạn hay không, đồng thời bạn cần hiểu rõ những điểm cần cải thiện.
Locator Plus (các mẹo tuỳ chỉnh và hướng dẫn mà chúng tôi cung cấp trong tài liệu này) là tổ hợp tối ưu mà chúng tôi đề xuất về các API của Nền tảng Google Maps để tạo trải nghiệm tuyệt vời cho người dùng công cụ định vị. Khi làm theo những phương pháp này, bạn có thể giúp người dùng tìm thấy vị trí của bạn trên bản đồ, xem thông tin chi tiết họ cần để đưa ra quyết định và cung cấp cho họ chỉ đường, cho dù họ đang lái xe, đạp xe, đi bộ hay đi phương tiện công cộng.
Đối với người dùng Locator Plus, trang tổng quan phân tích giúp bạn phân tích và tạo thông tin chi tiết từ dữ liệu của mình, nhờ đó bạn có thể nắm rõ mức độ tương tác của người mua sắm với công cụ định vị cửa hàng. Để truy cập vào báo cáo này, hãy chuyển đến mục Báo cáo về mức độ tương tác của bảng điều khiển. Để biết thêm thông tin chi tiết về báo cáo này, hãy xem bài viết Báo cáo lượt tương tác.
Sơ đồ sau đây cho thấy các API cốt lõi liên quan đến việc triển khai Locator Plus. Sơ đồ này cũng cho thấy một cơ sở dữ liệu về dữ liệu vị trí của riêng bạn mà bạn có thể kết hợp với Thông tin chi tiết về địa điểm để cung cấp cho người dùng bộ thông tin đầy đủ và tốt nhất có thể. (Nhấp để phóng to.)
Bật API
Để triển khai các phương pháp này, bạn phải bật các API sau trong Google Cloud Console: Để 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 triển khai
Sau đây là các phương pháp và nội dung tuỳ chỉnh mà chúng ta sẽ đề cập trong tài liệu này.
- Biểu tượng dấu kiểm là một phương pháp cốt lõi.
- Biểu tượng ngôi sao là một lựa chọn tuỳ chỉnh không bắt buộc nhưng nên dùng để nâng cao giải pháp.
| Hiển thị vị trí của bạn trên bản đồ tương tác |
Tạo một bản đồ cho phép người dùng xem thông tin chi tiết về vị trí, di chuyển xung quanh cũng như phóng to và thu nhỏ. Hoặc khám phá giải pháp Quick Builder Locator Plus để nhanh chóng tạo bản đồ, bao gồm cả việc nhập thông tin doanh nghiệp từ trang thông tin Trang doanh nghiệp, nhúng đường liên kết đặt lịch hẹn và triển khai vào Google Cloud Storage. |
|
| Cung cấp Place Details | Sau khi người dùng tìm thấy các địa điểm gần nhất của bạn trên bản đồ, hãy cung cấp cho họ Place Details có ý nghĩa về địa điểm để giúp họ đưa ra quyết định. | |
| Hiển thị vị trí ở chế độ xem 45° | Giúp người dùng xem vị trí của bạn rõ hơn ở chế độ xem vệ tinh từ góc 45 độ. | |
| Xác định vị trí của người dùng | Thêm chức năng nhập liệu trong khi nhập để cải thiện trải nghiệm người dùng trên tất cả các nền tảng và cải thiện độ chính xác của địa chỉ với số lần nhấn phím tối thiểu. | |
| Hiển thị thời gian di chuyển và khoảng cách đến các vị trí gần nhất | Tính toán khoảng cách và thời gian di chuyển cho nhiều điểm xuất phát và điểm đến, bạn có thể chọn chỉ định nhiều phương tiện di chuyển như đi bộ, lái xe hoặc đi xe đạp. | |
| Giúp người dùng đặt lịch hẹn |
Cho phép người dùng đặt cuộc hẹn trong bảng điều khiển bên của phần Chi tiết về địa điểm. Hoặc khám phá giải pháp Quick Builder Locator Plus để nhanh chóng tạo bản đồ, bao gồm cả việc nhập thông tin doanh nghiệp từ trang thông tin Trang doanh nghiệp, nhúng đường liên kết đặt lịch hẹn và triển khai vào Google Cloud Storage. |
|
| Hiển thị ưu đãi tại địa phương | Hiển thị cho người dùng các ưu đãi tại địa phương có thể nhấp vào trong bảng điều khiển bên của phần Place Details. | |
| Cung cấp chỉ dẫn đường đi | Nhận dữ liệu chỉ đường từ điểm khởi hành đến điểm đến bằng nhiều phương tiện di chuyển, chẳng hạn như đi bộ, lái xe, đi xe đạp và sử dụng phương tiện công cộng. | |
| Tuỳ chỉnh bản đồ | Tạo điểm đánh dấu tuỳ chỉnh trên bản đồ để giúp các vị trí của bạn nổi bật và tạo kiểu cho bản đồ sao cho phù hợp với màu sắc thương hiệu của bạn. Hiển thị (hoặc ẩn) các địa điểm yêu thích (POI) cụ thể trên bản đồ để giúp người dùng định hướng tốt hơn và kiểm soát mật độ POI để tránh bản đồ bị rối mắt. | |
| Khai thác thông tin chi tiết về mức sử dụng bằng số liệu phân tích | Định cấu hình và sử dụng Google Analytics để nắm bắt thông tin chi tiết về chiến lược và việc triển khai công cụ định vị của bạn. | |
| Gửi đường đi đến thiết bị di động | Ngoài việc hiển thị đường đi trên công cụ định vị, bạn cũng có thể gửi đường đi đến điện thoại của người dùng để điều hướng bằng Google Maps khi đang di chuyển. | |
| Hiển thị Chế độ xem đường phố để giúp người dùng hình dung vị trí | Cung cấp cho người dùng hình ảnh trong Chế độ xem đường phố với chế độ xem 360 độ để giúp họ định hướng tốt hơn và tìm thấy vị trí của bạn nhanh hơn. | |
| Xác định vị trí của người dùng bằng tính năng Định vị vị trí | Nếu bạn không muốn dựa vào các dịch vụ vị trí trên thiết bị, hãy sử dụng tính năng Định vị vị trí để giúp xác định vị trí của người dùng. | |
| Kết hợp dữ liệu vị trí tuỳ chỉnh với Place Details | Kết hợp thông tin vị trí tuỳ chỉnh của riêng bạn với Place Details để cung cấp cho người dùng một bộ dữ liệu phong phú để đưa ra quyết định. |
Hiện vị trí của bạn trên một bản đồ tương tác
Công cụ định vị là một phần quan trọng trong trải nghiệm người dùng. Tuy nhiên, một số trang web có thể không có cả bản đồ, khiến người dùng phải rời khỏi trang web hoặc ứng dụng để tìm một địa điểm gần đó. Điều này có nghĩa là người dùng sẽ có trải nghiệm không tối ưu khi phải chuyển đổi giữa các trang để nhận được thông tin họ cần. Thay vào đó, bạn có thể nâng cao trải nghiệm này bằng cách nhúng và tuỳ chỉnh bản đồ trong các ứng dụng của mình.
Bạn có thể bật chức năng này theo 2 cách: bằng cách sử dụng giải pháp Quick Builder Locator Plus để cung cấp chức năng này ngay lập tức, hoặc bằng cách sử dụng chế độ triển khai Maps động của riêng bạn. Phần này mô tả chi tiết các lựa chọn này.
Sử dụng Quick Builder Locator Plus
Bạn có thể sử dụng giải pháp Quick Builder Locator Plus để nhập thông tin doanh nghiệp từ Trang doanh nghiệp. Giờ đây, mọi thay đổi về thông tin doanh nghiệp trên Trang doanh nghiệp của bạn sẽ được phản ánh trong công cụ định vị cửa hàng trên trang web của bạn. Những thay đổi này có thể bao gồm giờ hoạt động, thông tin liên hệ, ảnh, các lựa chọn về dịch vụ và nhiều thông tin khác. Quick Builder có thể giúp bạn nhanh chóng khám phá cách thiết lập vị trí doanh nghiệp trên bản đồ, tạo mã có thể triển khai hoặc triển khai trực tiếp vào Google Cloud Storage chỉ trong vài phút.
Sử dụng chế độ triển khai Bản đồ động của riêng bạn
| Ví dụ này sử dụng: Maps JavaScript API | Cũng có sẵn: Android | iOS |
Bạn có thể thêm một bản đồ động vào trang của mình (tức là bản đồ mà người dùng có thể di chuyển, phóng to và thu nhỏ, đồng thời xem thông tin chi tiết về các vị trí và địa điểm yêu thích) chỉ bằng một vài dòng mã.
Trước tiên, bạn cần thêm Maps JavaScript API vào trang.
Việc này được thực hiện thông qua việc liên kết tập lệnh sau trong trang HTML của bạn, bao gồm cả libraries=marker để bạn có thể thêm các điểm đánh dấu nâng cao vào bản đồ.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
URL này tham chiếu đến hàm JavaScript initMap chạy khi trang tải. Trong URL, bạn cũng có thể xác định ngôn ngữ hoặc khu vực của bản đồ để đảm bảo bản đồ được định dạng đúng cách cho quốc gia cụ thể mà bạn đang nhắm đến. Việc đặt một khu vực cũng đảm bảo rằng hành vi của các ứng dụng được dùng bên ngoài Hoa Kỳ sẽ thiên về khu vực mà bạn đặt. Xem Thông tin chi tiết về phạm vi cung cấp của Google Maps Platform để biết danh sách đầy đủ các ngôn ngữ và khu vực được hỗ trợ, đồng thời tìm hiểu thêm về cách sử dụng tham số region.
Tiếp theo, bạn cần có một div HTML để đặt bản đồ trên trang.
Đây là nơi bản đồ sẽ xuất hiện.
<div id="map"></div>
Bước tiếp theo là thiết lập chức năng cơ bản cho bản đồ. Việc này được thực hiện trong hàm tập lệnh initMap được chỉ định trong URL tập lệnh. Trong tập lệnh này (như minh hoạ trong ví dụ sau), bạn có thể đặt vị trí ban đầu, mã bản đồ (bắt buộc đối với các điểm đánh dấu nâng cao và tính năng tạo kiểu bản đồ dựa trên đám mây), loại bản đồ và những chế độ kiểm soát mà người dùng có thể sử dụng trên bản đồ. Lưu ý rằng getElementById() tham chiếu đến mã nhận dạng "map" div trong ví dụ trước.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
Đối với một công cụ định vị, bạn thường muốn đặt vị trí ban đầu, điểm trung tâm hoặc ranh giới và mức thu phóng (mức độ phóng to bản đồ ở vị trí đó). Hầu hết các phần tử khác, chẳng hạn như điều chỉnh các chế độ kiểm soát, là không bắt buộc khi bạn xác định mức độ tương tác với bản đồ.
Lấy mã địa điểm
| Ví dụ này sử dụng: Places API (Mới) | Cũng có sẵn: JavaScript |
Bạn có thể có một cơ sở dữ liệu về các vị trí của mình với thông tin cơ bản như tên của vị trí đó, địa chỉ và số điện thoại. Để tìm nạp thông tin mà Google Maps Platform có về địa điểm đó, bao gồm cả toạ độ địa lý và thông tin do người dùng đóng góp, hãy tìm place ID (mã địa điểm) tương ứng với từng vị trí trong cơ sở dữ liệu của bạn. Bạn có thể 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 Chỉ có mã nhận dạng Nguyên tắc cơ bản của Tìm kiếm văn bản).
Sau đây là ví dụ về cách yêu cầu mã địa điểm cho văn phòng Google ở London:
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-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'Bạn có thể lưu trữ mã địa điểm này trong cơ sở dữ liệu và sử dụng mã này như một cách hiệu quả để yêu cầu thông tin về địa điểm. Sau đây là hướng dẫn sử dụng Mã địa điểm để mã hoá địa lý, truy xuất Place Details và yêu cầu chỉ đường đến địa điểm đó.
Mã hoá địa lý cho vị trí của bạn
| Ví dụ này sử dụng: Geocoding API | Cũng có sẵn: JavaScript |
Nếu cơ sở dữ liệu vị trí của bạn có địa chỉ đường phố nhưng không có toạ độ địa lý, hãy sử dụng Geocoding API để lấy vĩ độ và kinh độ của địa chỉ đó nhằm mục đích đặt điểm đánh dấu trên bản đồ. Bạn có thể mã hoá địa lý địa chỉ của mình ở phía máy chủ, lưu trữ vĩ độ và kinh độ trong cơ sở dữ liệu, đồng thời làm mới ít nhất 30 ngày một lần.
Dưới đây là ví dụ về cách sử dụng Geocoding API để lấy vĩ độ và kinh độ của mã địa điểm được trả về cho văn phòng Google ở London:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_aĐang thêm vị trí vào bản đồ
Bước tiếp theo là thêm các vị trí của bạn vào bản đồ. Việc này thường được thực hiện bằng cách thêm các điểm đánh dấu nâng cao vào bản đồ, mặc dù bạn có thể sử dụng một số lựa chọn khác, chẳng hạn như các lớp dữ liệu.
Sau khi có vĩ độ và kinh độ cho vị trí của bạn, đây là ví dụ về cách thêm một điểm đánh dấu nâng cao có ký tự văn bản tuỳ chỉnh vào bản đồ:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
Với một vài điểm đánh dấu, bạn có thể xem vị trí của nhiều địa điểm cùng lúc.
Nếu có nhiều vị trí, bạn có thể cân nhắc sử dụng tiện ích phân cụm điểm đánh dấu cho JavaScript, Android hoặc iOS. Sau đây là một ví dụ về tính năng nhóm điểm đánh dấu trong mẫu trình định vị cửa hàng JavaScript trên GitHub.
Cung cấp thông tin chi tiết về địa điểm
| Ví dụ này sử dụng: Maps JavaScript API | Ngoài ra, bạn có thể dùng: Places API (Mới) | Android | iOS |
Bạn có thể chia sẻ Thông tin chi tiết về địa điểm mà người dùng cần biết trước khi họ ghé thăm một trong các địa điểm của bạn. Với Place Details phong phú như thông tin liên hệ, giờ hoạt động, điểm xếp hạng từ người dùng, ảnh của người dùng và trạng thái đóng cửa tạm thời, người dùng của bạn sẽ biết chính xác những gì họ có thể mong đợi khi ghé thăm địa điểm của bạn. Sau khi gọi 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, một thanh bên trên web hoặc theo bất kỳ cách nào khác mà bạn muốn.
Để yêu cầu Place Details, bạn cần có mã địa điểm của từng vị trí. Hãy xem phần Lấy mã địa điểm để truy xuất mã địa điểm của vị trí.
Mở rộng để xem các video yêu cầu Place Details:
Lấy giờ mở cửa
Kiểm tra thông tin đóng cửa
Kiểm soát chi phí
Ví dụ sau đây sử dụng lớp Địa điểm trong Places Library, Maps JavaScript API để truy xuất Place Details và thêm thông tin đó vào một InfoWindow. Cách triển khai này sử dụng chiến lược tiết kiệm chi phí bằng cách chỉ kích hoạt yêu cầu Chi tiết về địa điểm khi người dùng yêu cầu thông tin chi tiết bằng cách nhấp vào điểm đánh dấu thay vì chủ động tìm nạp thông tin chi tiết cho tất cả các vị trí bất kể người dùng có quan tâm hay không.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, gmpClickable: true, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("gmp-click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
Hiển thị vị trí ở chế độ xem 45°
| Ví dụ này sử dụng: Maps JavaScript API | Cũng có sẵn: Android | iOS |
Khi người dùng nhìn thấy vị trí của bạn từ trên không, họ sẽ hình dung rõ hơn về vị trí đó, nhờ vậy họ có thể tìm thấy vị trí của bạn. Khi người dùng chọn một vị trí duy nhất để xem thêm thông tin chi tiết, bạn có thể phóng to vị trí đó để hiển thị hình ảnh vệ tinh có sẵn ở góc 45°.
Mã mẫu sau đây đặt bản đồ ở mức thu phóng cao, loại bản đồ tương thích và góc nghiêng sẽ hiển thị hình ảnh 45° nếu có. Thông tin chi tiết về phạm vi cung cấp hình ảnh 45° được giải thích trong tài liệu.
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}Đặt lại về chế độ xem bản đồ ban đầu
Người dùng thường muốn chuyển đổi qua lại giữa chế độ xem chi tiết của một vị trí và chế độ xem tóm tắt của một số vị trí lân cận. Để hỗ trợ việc này, hãy thêm một trình nghe để phát hiện thời điểm người dùng rời khỏi chế độ xem chi tiết trong các hoạt động tương tác trên bản đồ hoặc trong chế độ xem danh sách. Ví dụ: việc theo dõi sự kiện zoom_changed trên đối tượng map cho biết rằng người dùng đã thu nhỏ chế độ xem chi tiết theo cách thủ công hoặc đã gọi một hàm khác để cập nhật mức thu phóng. Trong mẫu này, thao tác thu nhỏ sẽ đặt lại bản đồ về loại và độ nghiêng bản đồ ban đầu.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Xác định vị trí của người dùng
| Ví dụ này sử dụng: Maps JavaScript API | Cũng có sẵn: Android | iOS |
Thành phần chính tiếp theo trong mọi công cụ định vị là xác định vị trí bắt đầu của người dùng. Theo mặc định, bạn có thể sử dụng dịch vụ vị trí trên thiết bị di động và thông tin định vị vị trí trên trình duyệt web để yêu cầu người dùng cấp quyền đặt vị trí ban đầu là vị trí hiện tại của người dùng. Tuy nhiên, người dùng có thể từ chối cấp các quyền đó hoặc có thể muốn đặt một vị trí khác làm điểm xuất phát.
Người dùng ngày nay đã quen với chức năng tự động hoàn thành khi nhập trên phiên bản Google Maps dành cho người dùng cá nhân. Bạn có thể tích hợp chức năng này vào bất kỳ ứng dụng nào bằng cách sử dụng các thư viện Địa điểm của Google Maps Platform trên thiết bị di động và web. Khi người dùng nhập một địa chỉ, tính năng tự động hoàn thành sẽ điền phần còn lại thông qua việc sử dụng các tiện ích. Bạn cũng có thể cung cấp chức năng tự động hoàn thành của riêng mình bằng cách sử dụng trực tiếp Place Autocomplete Data API.
Để thêm thư viện Place Autocomplete vào trang web, bạn chỉ cần thêm một vài tham số truy vấn vào URL tập lệnh Maps JavaScript API. Trong ví dụ sau, phần bổ sung là libraries=places,marker.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Tiếp theo, hãy thêm một phần tử vùng chứa vào trang của bạn, nơi tiện ích PlaceAutocompleteElement sẽ được thêm vào.
<div id="autocomplete-container"></div>
Cuối cùng, hãy khởi động tiện ích PlaceAutocompleteElement và nối tiện ích đó vào vùng chứa. Hạn chế đề xuất của tính năng Place Autocomplete bằng includedPrimaryTypes: ["geocode"] sẽ định cấu hình tiện ích để chấp nhận địa chỉ đường phố, khu vực xung quanh, thành phố và mã ZIP để người dùng có thể nhập bất kỳ mức độ cụ thể nào để mô tả điểm khởi hành của họ. Khi người dùng chọn một kết quả dự đoán, sự kiện gmp-select sẽ kích hoạt và bạn có thể gọi place.fetchFields() để yêu cầu trường location chứa vĩ độ và kinh độ của vị trí xuất phát của người dùng. Bạn sẽ sử dụng các toạ độ bản đồ này để chỉnh tâm bản đồ và cho biết mối quan hệ giữa các vị trí của bạn với vị trí ban đầu.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); }); }
Trong ví dụ này, sau khi người dùng chọn địa chỉ, hàm addUserLocation() sẽ được thực thi. Thao tác này sẽ lấy vị trí của kết quả trùng khớp, di chuyển bản đồ đến vị trí đó và thêm một điểm đánh dấu nâng cao.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
Sau đó, bạn có thể xem mối quan hệ giữa người dùng và bất kỳ vị trí cụ thể nào, như minh hoạ trong hình ảnh sau.
Mở rộng phần này để xem video hướng dẫn từng bước về cách thêm tính năng Tự động hoàn thành địa điểm vào ứng dụng của bạn:
Trang web
Ứng dụng Android
Ứng dụng iOS
Đang hiển thị thời gian di chuyển và khoảng cách đến các vị trí gần nhất
| Ví dụ này sử dụng: Routes API | Ngoài ra, bạn có thể sử dụng: Thư viện tuyến đường, Maps JavaScript API |
Sau khi biết được vị trí của người dùng, bạn có thể so sánh vị trí này với vị trí của bạn. Việc này bằng tính năng Tính toán ma trận tuyến đường trong Routes API (hoặc lớp RouteMatrix trong Thư viện tuyến đường, Maps JavaScript API) sẽ giúp người dùng chọn vị trí thuận tiện nhất cho họ theo thời gian lái xe hoặc khoảng cách đường bộ.
Việc hiển thị các vị trí gần người dùng ngụ ý rằng bạn đã điền sẵn các vị trí của mình. Khi sử dụng cơ sở dữ liệu vị trí của riêng bạn, điều quan trọng là phải đảm bảo dữ liệu ở định dạng có thể dùng trong bản đồ, chẳng hạn như GeoJSON, được mô tả trong chủ đề Lớp dữ liệu.
Cách tiêu chuẩn để sắp xếp danh sách vị trí là sắp xếp theo khoảng cách. Khoảng cách này thường được tính bằng cách sử dụng đường thẳng từ người dùng đến vị trí, nhưng điều này có thể gây hiểu lầm. Đường thẳng có thể đi qua một con sông không thể vượt qua hoặc qua những con đường đông đúc vào thời điểm mà một vị trí khác có thể thuận tiện hơn. Điều này rất quan trọng khi bạn có nhiều vị trí cách nhau vài km.
Phương thức computeRouteMatrix hoạt động bằng cách lấy danh sách vị trí của điểm khởi hành và điểm đến, đồng thời trả về không chỉ khoảng cách di chuyển mà còn cả thời gian di chuyển giữa các vị trí đó. Trong trường hợp của người dùng, điểm xuất phát sẽ là vị trí hiện tại hoặc điểm xuất phát ưu tiên của họ, còn điểm đến sẽ là vị trí của các địa điểm.
Bạn có thể chỉ định điểm xuất phát và điểm đến dưới dạng cặp toạ độ, mã địa điểm hoặc địa chỉ. Bạn có thể sử dụng computeRouteMatrix với các lựa chọn ưu tiên về định tuyến, chẳng hạn như TRAFFIC_AWARE để cho thấy kết quả dựa trên thời gian lái xe hiện tại hoặc trong tương lai.
Ví dụ sau đây gọi điểm cuối computeRouteMatrix trong Routes API, chỉ định nguồn gốc của người dùng và mã địa điểm đích. Ví dụ này tính toán khoảng cách và thời gian di chuyển từ tâm bản đồ đến 3 văn phòng của Google ở London:
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'Phản hồi từ dịch vụ này chứa khoảng cách (tính bằng mét) và thời lượng cho mỗi cặp điểm xuất phát và điểm đến, tương tự như phản hồi trong ví dụ sau:
Mở rộng để xem phản hồi mẫu:
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]Hình ảnh sau đây cho thấy điểm xuất phát (điểm đánh dấu màu đỏ C) và các điểm đến trên bản đồ:
Khoảng cách đường thẳng và khoảng cách theo tuyến đường thường khác nhau, như minh hoạ trong bảng sau.
| Thông tin vị trí | Khoảng cách đường thẳng | Đường trong giao thông / Thời gian |
|---|---|---|
| Vị trí A | 3,32 km | 4,5 km / 15 phút |
| Vị trí B | 3,2 km | 5 km / 17 phút |
| Vị trí C | 4,84 km | 6,9 km / 23 phút |
Mặc dù Vị trí B gần nhất về khoảng cách, nhưng tuyến đường và thời gian để đến đó sẽ lâu hơn vì Vị trí A có thể đến được bằng đường cao tốc.
Sau khi đưa ra yêu cầu này, bạn có thể xử lý kết quả trùng khớp để sắp xếp các phản hồi theo thời lượng lái xe. Bạn có thể tìm thấy ví dụ về hàm như vậy trong lớp học lập trình về công cụ định vị.
Cung cấp chỉ dẫn đường đi
| Ví dụ này sử dụng: Thư viện tuyến đường, Maps JavaScript API | Các API khác: Routes API dịch vụ web để sử dụng trên Android và iOS, trực tiếp từ ứng dụng hoặc từ xa thông qua một proxy máy chủ |
Việc cho người dùng xem chỉ đường ngay trong trang web hoặc ứng dụng của bạn có nghĩa là họ không cần rời khỏi trang web của bạn, nhờ đó, người dùng sẽ không bị phân tâm bởi các trang khác hoặc nhìn thấy đối thủ cạnh tranh trên bản đồ. Với Routes API, bạn cũng có thể yêu cầu tuyến đường thân thiện với môi trường để ước tính mức tiêu thụ nhiên liệu hoặc năng lượng và cho biết tác động đến môi trường của một hành trình.
Lớp Route trong Thư viện tuyến đường, Maps JavaScript API cũng có các phương thức như createPolylines() và createWaypointAdvancedMarkers() cho phép bạn xử lý kết quả và hiển thị kết quả trên bản đồ.
Sau đây là ví dụ về cách yêu cầu và hiển thị một tuyến đường trên bản đồ. Để biết thêm thông tin về mẫu này, hãy xem phần Lấy một tuyến đường.
Để tìm hiểu thêm về các tính năng này của Maps, hãy đọc Tài liệu về Maps JavaScript API hoặc xem lớp học lập trình từng bước để tạo một công cụ định vị.
Giúp người dùng đặt lịch hẹn
Khi người dùng xem Trang chi tiết về địa điểm của bạn trong một bảng điều khiển bên, bạn có thể mang đến sự thuận tiện khi đặt lịch hẹn chỉ bằng một cú nhấp chuột, như minh hoạ trong hình sau.
Có nhiều cách để bật tính năng này: (1) sử dụng giải pháp Quick Builder Locator Plus để cung cấp sẵn chức năng này và (2) sử dụng Trang doanh nghiệp của bạn. Phần này mô tả chi tiết các lựa chọn này.
Sử dụng Trình tạo nhanh Locator Plus
Bạn có thể sử dụng giải pháp Quick Builder Locator Plus để nhanh chóng nhập thông tin doanh nghiệp từ Trang doanh nghiệp. Sau khi nhập vào công cụ Trình tạo nhanh, bạn có thể bật các đường liên kết đặt lịch hẹn được nhúng (nếu có) cho các địa điểm kinh doanh của mình bằng cách sử dụng tính năng Đặt chỗ bằng Google. Ngay cả khi không có Trang doanh nghiệp được liên kết với Tài khoản Google, bạn vẫn có thể sử dụng Trình tạo nhanh để nhúng đường liên kết đặt phòng cho những doanh nghiệp mà bạn đã bật với nhà cung cấp dịch vụ đặt chỗ bên thứ ba thông qua tính năng Đặt chỗ bằng Google*.
*Tính năng Đặt chỗ bằng Google chỉ hoạt động ở một số quốc gia/khu vực, dành cho những doanh nghiệp hợp tác với một nhà cung cấp dịch vụ đặt chỗ được hỗ trợ. Nếu bạn quan tâm đến tính năng Đặt chỗ bằng Google nhưng không hợp tác với đối tác của tính năng này, hãy hướng dẫn nhà cung cấp của bạn gửi thông tin bày tỏ sự quan tâm bằng cách hoàn tất biểu mẫu bày tỏ sự quan tâm này và tham khảo tài liệu của chúng tôi để biết cách họ có thể bắt đầu. Nếu chưa hợp tác với một nhà cung cấp dịch vụ đặt chỗ, bạn có thể xem các nhà cung cấp đủ điều kiện trong phần Đặt chỗ trong Trình quản lý Trang doanh nghiệp.
Sử dụng Trang doanh nghiệp để bật tính năng đặt lịch hẹn
Khi bạn quản lý sự hiện diện trực tuyến bằng Trang doanh nghiệp, các vị trí doanh nghiệp mà bạn tạo sẽ được liên kết với mã địa điểm trên Google Maps Platform để cho phép chức năng lập bản đồ tích hợp với dữ liệu doanh nghiệp.
Business Profile API cho phép bạn tạo các hành động (chẳng hạn như đặt lịch hẹn) mà bạn có thể truy xuất và hiển thị trong ứng dụng của mình. Tuy nhiên, bạn cần thực hiện một số bước theo cách thủ công để bật tính năng này, như mô tả bên dưới.
Khi người dùng xem Place Details cho một trong các vị trí của bạn trong bảng điều khiển bên, bạn có thể cung cấp một đường liên kết để họ đặt lịch hẹn. Phần này mô tả cách thực hiện.
-
Tạo một
placeActionLinkBusiness Profile API cho vị trí thuộc loạiAPPOINTMENT,ONLINE_APPOINTMENThoặcDINING_RESERVATION.placeActionLinksẽ là đối tượng bạn dùng cho đường liên kết đến cuộc hẹn trong bảng điều khiển bên. (Nếu bạn đã tạo đường liên kết đến hành động đặt cuộc hẹn mà mình muốn, hãy chuyển sang bước tiếp theo.) Sau đây là ví dụ về phản hồi của một thao tác POSTplaceActionLinks.createthành công:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } -
Tìm vị trí của Trang doanh nghiệp được liên kết với mã địa điểm trên Google Maps Platform.
Khi người dùng xem Place Details, họ đang xem thông tin chi tiết cho một mã địa điểm trên Google Maps Platform. Mã địa điểm được liên kết với mã vị trí trên Trang doanh nghiệp, vì vậy, bạn cần tìm mã vị trí dựa trên mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đặt cuộc hẹn mà bạn đã tạo. Thực hiện các lệnh gọi Business Profile API sau:
- Liệt kê các tài khoản của dự án.
- Liệt kê tất cả các vị trí trong một tài khoản.
- Trong vị trí tài khoản,
LocationKeychứa mã địa điểm trên Google Maps Platform. Bạn có thể so sánh mã này với mã địa điểm của vị trí đang được xem.
-
Với mã vị trí, bạn có thể nhận được đường liên kết hành động mà bạn muốn. Để truy xuất một cuộc hẹn hiện có
placeActionLink, hãy liệt kêplaceActionLinkshiện có cho vị trí và lọc theoplaceActionTypeđể tìm đường liên kết đặt lịch hẹn mà bạn muốn sử dụng (APPOINTMENT,ONLINE_APPOINTMENThoặcDINING_RESERVATION).Ví dụ sau đây cho thấy một
placeActionLinkAPPOINTMENT trong phản hồi từ lệnh gọi LIST.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] } - Tạo và điền sẵn một
<div>trong bảng điều khiển bên bằng dữ liệu liên quan từ đối tượngplaceActionLink, đặc biệt là URI cho đường liên kết đặt phòng.
Các lựa chọn thay thế khác để thêm đường liên kết đến cuộc hẹn
Nếu bạn không quản lý Trang doanh nghiệp hoặc không muốn sử dụng giải pháp Quick Builder Locator Plus, hãy kiểm tra nền tảng đặt lịch hẹn để xem tài liệu về cách nhúng một tiện ích đặt lịch hẹn vào trang web hoặc ứng dụng. Một lựa chọn khác là sử dụng Google Cloud, chẳng hạn như Cloud Spanner để quản lý khoảng không quảng cáo (video).
Hiển thị ưu đãi tại địa phương
Trong bảng điều khiển bên Chi tiết về địa điểm của một vị trí, bạn có thể giới thiệu các sản phẩm tại địa phương để người dùng nhấp vào. Google Doanh nghiệp của tôi API cho phép bạn tạo và truy xuất "bài đăng" (chẳng hạn như ưu đãi tại địa phương) được liên kết với các địa điểm của bạn. Hình sau đây minh hoạ ví dụ về một ưu đãi tại địa phương trong bảng điều khiển bên của phần Chi tiết về địa điểm.
(Sơ đồ kiến trúc trong phần Quick Builder (Trình tạo nhanh) cho thấy các công nghệ hiện có để thêm ưu đãi vào công cụ định vị của bạn.)
Vì ưu đãi tại địa phương được liên kết với vị trí, nên bạn cần tìm mã vị trí của Trang doanh nghiệp được liên kết với mã địa điểm trên Google Maps Platform cho vị trí mà người dùng đang xem.
Khi có mã vị trí của Trang doanh nghiệp, bạn có thể truy xuất ưu đãi có liên quan dưới dạng localPost để hiển thị trong bảng điều khiển bên Place Details. Sau đây là các bước:
- Với Google My Business API, hãy tạo mọi bài đăng ưu đãi mà bạn muốn hiển thị, thuộc loại
OFFER. -
Tìm vị trí / mã vị trí của Trang doanh nghiệp được liên kết với mã địa điểm trên bản đồ.
Khi người dùng xem Place Details, họ đang xem thông tin chi tiết cho một mã địa điểm trên Google Maps Platform. Mã địa điểm được liên kết với mã vị trí của Trang doanh nghiệp, vì vậy, bạn cần tìm mã vị trí dựa trên mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đến ưu đãi tại địa phương cho vị trí của mình. Thực hiện các lệnh gọi Business Profile API sau:
- Liệt kê các tài khoản của dự án.
- Liệt kê tất cả các vị trí trong một tài khoản.
- Trong vị trí tài khoản,
LocationKeychứa mã địa điểm trên bản đồ. Bạn có thể so sánh mã này với mã địa điểm của vị trí đang được xem.
Sau đây là ví dụ về yêu cầu cung cấp thông tin chi tiết của một địa điểm trong Business Profile API:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
Phản hồi chứa một trường
locationKeylà mã địa điểm mà bạn có thể dùng với các yêu cầu của Google Maps Platform.Mở rộng để xem câu trả lời mẫu.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
Giờ đây, bạn có thể nhận được ưu đãi mà mình muốn sau khi có mã vị trí. Để truy xuất một bài đăng ưu đãi hiện có, hãy liệt kê
localPostshiện có cho vị trí và lọc theotopicTypecủaOFFERđể tìm nội dung ưu đãi mà bạn muốn sử dụng.Sau đây là ví dụ về yêu cầu liệt kê các bài đăng tại địa phương đang hoạt động cho một vị trí:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Ví dụ sau đây cho thấy một
OFFERlocalPosttrong phản hồi.Mở rộng để xem câu trả lời mẫu.
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], } - Tạo và điền dữ liệu liên quan vào
<div>trong bảng điều khiển bên từ đối tượnglocalPost.
Tuỳ chỉnh bản đồ
Bạn có thể thay đổi giao diện và thông tin chi tiết của bản đồ theo nhiều cách. Ví dụ như bạn có thể:
- Tạo điểm đánh dấu tuỳ chỉnh của riêng bạn để thay thế các ghim mặc định trên bản đồ.
- Thay đổi màu sắc của các đối tượng trên bản đồ để thể hiện thương hiệu của bạn.
- Kiểm soát những địa điểm yêu thích mà bạn hiển thị (điểm tham quan, đồ ăn, chỗ ở, v.v.) và mật độ hiển thị, cho phép bạn tập trung sự chú ý của người dùng vào vị trí của bạn trong khi làm nổi bật các địa danh giúp người dùng đến được vị trí gần nhất.
Tạo điểm đánh dấu bản đồ tuỳ chỉnh
Bạn có thể tuỳ chỉnh các điểm đánh dấu nâng cao bằng cách thay đổi màu nền, đường viền hoặc màu ký tự mặc định của ghim (ví dụ: để cho biết một vị trí có đang mở cửa hay không), thay thế điểm đánh dấu bằng một hình ảnh đồ hoạ tuỳ chỉnh (chẳng hạn như biểu trưng thương hiệu của bạn) hoặc tạo các điểm đánh dấu HTML và CSS tuỳ chỉnh. Cửa sổ thông tin có thể cung cấp thêm thông tin cho người dùng, chẳng hạn như giờ mở cửa, số điện thoại hoặc ảnh.
Sau đây là một bản đồ mẫu sử dụng các điểm đánh dấu đồ hoạ tuỳ chỉnh. (Xem mã nguồn trong chủ đề về điểm đánh dấu đồ hoạ tuỳ chỉnh của Maps JavaScript API.)
Để biết thông tin chi tiết, hãy xem tài liệu về điểm đánh dấu nâng cao cho JavaScript (web), Android và iOS.
Tạo kiểu cho bản đồ
Google Maps Platform cho phép bạn tạo kiểu cho bản đồ theo cách giúp người dùng tìm thấy vị trí gần nhất, đến đó nhanh nhất có thể và giúp bạn củng cố thương hiệu của mình. Ví dụ: bạn có thể thay đổi màu sắc của bản đồ cho phù hợp với thương hiệu của mình và có thể giảm sự xao lãng trên bản đồ bằng cách kiểm soát những địa điểm yêu thích mà người dùng nhìn thấy. Google Maps Platform cũng cung cấp một số mẫu bản đồ cơ bản, một số mẫu được tối ưu hoá cho nhiều ngành, chẳng hạn như du lịch, hậu cần, bất động sản và bán lẻ.
Bạn có thể tạo hoặc sửa đổi kiểu bản đồ trong trang Kiểu bản đồ của dự án trên Google Cloud Console.
Mở rộng để xem ảnh động về cách tạo và tạo kiểu cho bản đồ trong Cloud Console:
Kiểu bản đồ theo ngành
Ảnh động này cho thấy các kiểu bản đồ dành riêng cho ngành được xác định trước mà bạn có thể sử dụng. Những kiểu này là điểm xuất phát tối ưu cho từng loại ngành. Ví dụ: kiểu bản đồ Bán lẻ sẽ giảm số lượng địa điểm yêu thích trên bản đồ, giúp người dùng tập trung vào các vị trí của bạn, cũng như các địa danh để giúp họ đến vị trí gần nhất một cách nhanh chóng và tự tin nhất có thể.
Chế độ kiểm soát địa điểm yêu thích
Ảnh động này đặt màu của điểm đánh dấu cho các địa điểm yêu thích và tăng mật độ POI trên kiểu bản đồ. Mật độ càng cao thì càng có nhiều điểm đánh dấu địa điểm yêu thích xuất hiện trên bản đồ.
Mỗi kiểu bản đồ đều có mã nhận dạng riêng. Sau khi xuất bản một kiểu trong Cloud Console, bạn sẽ tham chiếu mã bản đồ đó trong mã của mình. Điều này có nghĩa là bạn có thể cập nhật kiểu bản đồ theo thời gian thực mà không cần tái cấu trúc ứng dụng. Giao diện mới sẽ tự động xuất hiện trong ứng dụng hiện có và được dùng trên nhiều nền tảng. Các ví dụ sau đây cho thấy cách thêm mã bản đồ vào một trang web bằng Maps JavaScript API.
Bằng cách thêm một hoặc nhiều map_ids vào URL tập lệnh, Maps JavaScript API sẽ tự động cung cấp các kiểu đó để hiển thị bản đồ nhanh hơn khi bạn gọi các kiểu đó trong mã của mình.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
Đoạn mã sau đây hiển thị một bản đồ có kiểu trên trang web. (Không hiển thị phần tử <div id="map"></div> HTML nơi bản đồ sẽ xuất hiện trên trang.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Tìm hiểu thêm về cách kết hợp tính năng định kiểu bản đồ dựa trên đám mây trong JavaScript (web), Android và iOS.
Thu thập thông tin chi tiết về mức sử dụng bằng số liệu phân tích
Bằng cách sử dụng số liệu phân tích, bạn có thể nắm được những thông tin chi tiết có giá trị về cách người dùng tương tác với công cụ định vị của bạn. Phần này cung cấp hướng dẫn về cách thiết lập và theo dõi Google Analytics cũng như số liệu phân tích của Trang doanh nghiệp để theo dõi dữ liệu mà bạn quan tâm nhất. Đối với người dùng Locator Plus của Quick Builder, trang tổng quan phân tích sẽ giúp bạn phân tích và tạo thông tin chi tiết, cho bạn biết mức độ tương tác của khách truy cập trang web với công cụ định vị cửa hàng dựa trên dữ liệu ẩn danh.
Để truy cập vào báo cáo này, hãy chuyển đến phần báo cáo về mức độ tương tác của Cloud Console. Để biết thêm thông tin chi tiết về báo cáo này, hãy xem báo cáo lượt tương tác.
Vì Google Analytics cung cấp nhiều tính năng, nên chúng tôi sẽ không cung cấp thông tin toàn diện về cách thiết lập và sử dụng. Thay vào đó, chúng tôi sẽ giới thiệu cho bạn tài liệu chính để đọc thêm và hướng dẫn trong khi nêu bật những điểm cần cân nhắc chính về số liệu phân tích cho ứng dụng định vị của bạn.
Thiết lập Google Analytics
Nếu đang sử dụng Google Analytics với ứng dụng của mình, bạn có thể bỏ qua phần này.
Sau đây là ví dụ về "Thẻ toàn cầu" mà bạn sẽ dán trên trang web của mình để bật Google Analytics.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
Cho dù bạn đang sử dụng Trình quản lý thẻ của Google hay thêm Google Analytics trực tiếp vào trang web của mình, điều quan trọng là bạn phải hiểu cách sử dụng chế độ triển khai Google Analytics để làm những việc sau:
- Kích hoạt các hoạt động tương tác của người dùng (chẳng hạn như lượt nhấp) có thể đo lường độc lập với lượt xem trang web (sự kiện).
- Xem dữ liệu thô (chỉ số) trong các nhóm có ý nghĩa (phương diện hoặc phương diện tuỳ chỉnh).
Sử dụng sự kiện tuỳ chỉnh
Sau đây là ví dụ về cách xác định một sự kiện tuỳ chỉnh trong công cụ định vị:
gtag('event', 'location', { 'method': 'address' });
Bạn cần đặt tên cho event và method một cách rõ ràng để có thể hiểu được các sự kiện trong báo cáo. Kích hoạt các sự kiện này cho những lượt tương tác cụ thể mà bạn muốn đo lường, chẳng hạn như khi người dùng chọn một địa chỉ trong danh sách thả xuống Tự động hoàn thành, như minh hoạ trong hình sau.
Bạn có thể gửi lệnh gọi theo dõi sau đây đến Google Analytics bằng sự kiện và phương thức mà bạn đã xác định. (Chúng tôi sẽ trình bày từng tham số truy vấn trên một dòng riêng để bạn dễ đọc.)
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
Hình sau đây cho thấy lệnh gọi Google Analytics đó xuất hiện như thế nào trong chế độ xem Inspect (Kiểm tra) của trình duyệt, trên thẻ Network (Mạng). (Nhấp để phóng to).
Bạn có thể xác minh rằng thẻ sự kiện tuỳ chỉnh của mình đang được ghi lại đúng cách bằng cách xem chế độ xem "Theo thời gian thực" trong Google Analytics. Ví dụ: sự kiện "location" được thiết lập trước đó cho tính năng Place Autocomplete sẽ xuất hiện trong Google Analytics như minh hoạ trong các hình sau.
Ngoài ra, bạn có thể theo dõi các sự kiện theo thời gian thực bằng DebugView, như minh hoạ trong hình sau. Xin lưu ý rằng bạn phải đợi 24 giờ rồi mới có thể truy cập vào báo cáo Sự kiện đầy đủ trong mục Mức độ tương tác > Sự kiện của Google Analytics.
Bạn cũng có thể phát triển và đo lường các chiến lược để tăng số lượt ghé thăm cửa hàng thực tế từ ứng dụng định vị. Ví dụ: Google Analytics có một dịch vụ Lượt ghé thăm cửa hàng thực tế trong Analytics, liên kết phân tích lượt ghé thăm cửa hàng thực tế (do Google Ads đo lường) với số liệu phân tích của ứng dụng định vị. Bạn cũng có thể phát triển các chiến lược ứng dụng đến vị trí của riêng mình, chẳng hạn như ưu đãi trực tuyến có thể đổi tại các vị trí thực tế của bạn.
Các chỉ số trên Trang doanh nghiệp
Ngoài việc theo dõi các sự kiện, chỉ số và phương diện mà bạn quan tâm bằng Google Analytics, Trang doanh nghiệp cũng có chỉ số riêng. Ví dụ: nếu thêm đường liên kết đặt cuộc hẹn và đường liên kết đến ưu đãi tại địa phương vào công cụ định vị, bạn có thể nhận được các chỉ số về số lượt xem và số lượt nhấp vào những đường liên kết đó.
Yêu cầu mẫu sau đây gửi đến Business Profile API để yêu cầu nhiều loại chỉ số. Để theo dõi lượt nhấp vào mặt hàng, chỉ số LOCAL_POST_VIEWS_SEARCH và LOCAL_POST_ACTIONS_CALL_TO_ACTION sẽ phù hợp nhất.
Mở rộng để xem yêu cầu mẫu.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
"locationNames": [
"accounts/111098884960528804666/locations/15899957830169237700"
],
"basicRequest": {
"metricRequests": [
{
"metric": "QUERIES_DIRECT"
},
{
"metric": "QUERIES_INDIRECT"
},
{
"metric": "VIEWS_MAPS"
},
{
"metric": "VIEWS_SEARCH"
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS"
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH"
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
}
],
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
}
}Mở rộng để xem câu trả lời mẫu.
{
"locationMetrics": [
{
"locationName": "accounts/111098884960528804666/locations/15899957830169237700",
"timeZone": "Asia/Singapore",
"metricValues": [
{
"metric": "QUERIES_DIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "82"
}
},
{
"metric": "QUERIES_INDIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1493"
}
},
{
"metric": "VIEWS_MAPS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1571"
}
},
{
"metric": "VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "631"
}
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "3"
}
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "42"
}
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "11"
}
}
]
}
]
}
Phản hồi này chứa các chỉ số, đáng chú ý nhất là:
- 1.571 lượt xem vị trí này trên Google Maps
- 631 lượt xem vị trí trên Google Tìm kiếm.
- 3 yêu cầu chỉ đường lái xe đến địa điểm.
- 42
LOCAL_POST_ACTIONS_CALL_TO_ACTIONlượt nhấp vào mặt hàng. - 11 lượt xem Bài đăng địa phương trên Google Tìm kiếm.
Một lựa chọn khác về chỉ số là sử dụng tính năng Đặt chỗ bằng Google để tạo đường liên kết đến hành động. Khi người dùng nhấp vào đường liên kết hành động được tạo trong tính năng Đặt chỗ bằng Google, bạn có thể ghi lại những hành động đó vào Google Analytics, nhờ đó bạn có thể theo dõi lượt chuyển đổi trong Google Analytics. Hãy xem tài liệu về tính năng theo dõi lượt chuyển đổi để biết thêm thông tin.
Bất kể bạn sử dụng chiến lược chỉ số nào, việc đo lường không chỉ là xem hiệu suất của bạn so với các KPI. Những con số này cũng giúp bạn hiểu được tác động của những điểm cải tiến này đối với công cụ định vị đối với doanh nghiệp của bạn. Ngoài ra, bạn có thể so sánh các chỉ số từ Google Analytics trên công cụ định vị với các chỉ số của Trang doanh nghiệp. Ví dụ: bằng cách so sánh các chỉ số này, bạn có thể biết có bao nhiêu khách hàng nhận được chỉ đường từ công cụ định vị và Google Maps để sau đó ghé thăm địa điểm thực tế của bạn.
Cải thiện Locator Plus
Tuỳ thuộc vào nhu cầu của doanh nghiệp hoặc người dùng, bạn có thể nâng cao hơn nữa trải nghiệm của người dùng.
Gửi đường đi đến thiết bị di động
Để giúp người dùng dễ dàng đến một địa điểm, bạn có thể nhắn tin hoặc gửi email cho họ một đường liên kết chỉ đường. Khi họ nhấp vào đường liên kết đó, ứng dụng Google Maps sẽ khởi chạy trên điện thoại của họ (nếu đã cài đặt) hoặc maps.google.com sẽ tải trong trình duyệt web trên thiết bị của họ. Cả hai trải nghiệm này đều cung cấp cho người dùng lựa chọn sử dụng đường đi từng chặng, bao gồm cả hướng dẫn bằng giọng nói, để đến đích.
Sử dụng
URL của Maps để tạo một URL chỉ đường như sau, với tên địa điểm được mã hoá URL làm tham số destination và mã địa điểm làm tham số destination_place_id. Bạn không mất phí khi tạo hoặc sử dụng URL trên Maps, vì vậy, bạn không cần thêm khoá API vào URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Bạn có thể tuỳ ý cung cấp một tham số truy vấn origin bằng cách sử dụng cùng một định dạng địa chỉ như đích đến. Nhưng nếu bỏ qua tham số này, chỉ đường sẽ bắt đầu từ vị trí hiện tại của người dùng, có thể khác với vị trí mà họ đang sử dụng ứng dụng Locator Plus của bạn. URL của Maps cung cấp các lựa chọn tham số truy vấn bổ sung, chẳng hạn như travelmode và dir_action=navigate để khởi chạy chỉ đường khi bật chế độ chỉ đường.
Đường liên kết có thể nhấp này, mở rộng URL ví dụ ở trên, đặt origin làm sân vận động bóng đá ở London và sử dụng travelmode=transit để cung cấp chỉ đường bằng phương tiện công cộng đến đích đến.
Để gửi văn bản hoặc email có chứa URL này, bạn nên sử dụng một ứng dụng bên thứ ba, chẳng hạn như twilio. Nếu đang sử dụng App Engine, bạn có thể dùng các công ty bên thứ ba để gửi tin nhắn SMS hoặc email. Để biết thêm thông tin, hãy xem phần Gửi tin nhắn bằng dịch vụ bên thứ ba.
Hiển thị Chế độ xem đường phố để giúp người dùng hình dung vị trí
Đối với nhiều địa điểm trên thế giới, bạn có thể sử dụng Chế độ xem đường phố để hiển thị bên ngoài một địa điểm, giúp người dùng xem hình ảnh của địa điểm đó trước khi đến. Bạn có thể cung cấp Chế độ xem đường phố ở dạng tương tác (web) hoặc tĩnh (API), tuỳ thuộc vào việc bạn muốn người dùng "nhìn xung quanh" khu vực ở chế độ 360 độ hay không. Chế độ xem đường phố cũng có trên Android và iOS.
Xác định vị trí của người dùng bằng tính năng Định vị địa lý
Trong hầu hết các trường hợp, bạn có thể xác định chính xác vị trí của người dùng bằng các dịch vụ vị trí được tích hợp vào thiết bị hoặc trình duyệt của họ. Chúng tôi cung cấp một ví dụ về việc sử dụng tính năng Định vị địa lý HTML5 của trình duyệt để hiển thị vị trí địa lý của người dùng hoặc thiết bị trên Google Maps, đồng thời có tài liệu về việc yêu cầu quyền và lấy vị trí trong Android và iOS. Tuy nhiên, có thể có những trường hợp bạn muốn dùng một công cụ tìm vị trí thay thế; ví dụ: nếu dịch vụ vị trí trên thiết bị bị tắt hoặc bạn lo ngại vị trí trên thiết bị bị giả mạo.
Geolocation API là một API phía máy chủ trả về vị trí và bán kính độ chính xác dựa trên thông tin về các trạm phát sóng và nút Wi-Fi mà ứng dụng có thể phát hiện. Bạn có thể sử dụng Dịch vụ vị trí địa lý làm cơ chế dự phòng để xác định vị trí của người dùng hoặc bạn có thể sử dụng dịch vụ này để kiểm tra chéo vị trí do thiết bị báo cáo.
Kết hợp dữ liệu vị trí tuỳ chỉnh với Place Details
Trong phần Cung cấp thông tin chi tiết về địa điểm trước đó, chúng ta đã đề cập đến việc sử dụng Place Details để cung cấp cho người dùng nhiều thông tin về vị trí của bạn, chẳng hạn như giờ mở cửa, ảnh và bài đánh giá.
Bạn nên tìm hiểu về các cấp giá và SKU của nhiều trường dữ liệu trong Places API (mới). Để quản lý chi phí, một chiến lược là kết hợp thông tin bạn đã có về vị trí của mình với thông tin mới nhất từ Google Maps, chẳng hạn như thông tin về việc đóng cửa tạm thời, giờ hoạt động vào các ngày lễ, điểm xếp hạng, ảnh và bài đánh giá của người dùng. Nếu đã có thông tin liên hệ cho các địa điểm, bạn sẽ không cần yêu cầu các trường đó từ phần Place Details và có thể giới hạn mặt nạ trường để chỉ tìm nạp những trường mà bạn muốn hiển thị.
Bạn có thể có dữ liệu địa điểm riêng để bổ sung hoặc sử dụng thay vì Place Details. Codelab cho công cụ định vị toàn ngăn xếp cung cấp ví dụ về cách sử dụng GeoJSON với cơ sở dữ liệu để lưu trữ và truy xuất thông tin chi tiết về vị trí của riêng bạn.