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 để nhận thông tin về địa điểm, chỉ đường 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 Google Cloud Console cho phép bạn nhanh chóng tạo một bộ định vị, bao gồm cả việc nhập trang thông tin trong Trang doanh nghiệp và tự động nhúng các đường liên kết đặt lịch hẹn từ nhà cung cấp bên thứ ba. Giao diện người dùng tương tác cho phép bạn tạo mã và triển khai trên Cloud trong vài phút.
Người dùng của bạn muốn tìm hiểu về các sản phẩm và dịch vụ trên mạng cũng như tìm được địa điểm tốt nhất và thuận tiện nhất để ghé thăm, đặt lịch hẹn hoặc đến lấy hàng. Họ muốn đến vị trí của bạn nhanh nhất có thể và bạn muốn cung cấp cho họ trải nghiệm trực tuyến phong phú nhằm tăng số lượt ghé thăm vị trí thực tế của bạn, tăng cường sự hài lòng của người dùng và giảm số cuộc gọi hỗ trợ. Bạn cũng muốn đo lường mức độ thành công của bộ đị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, và bạn muốn biết nơi cần cải thiện.
Locator Plus – các mẹo hướng dẫn và tùy chỉnh mà chúng tôi cung cấp trong chủ đề này – là những gì chúng tôi đề xuất như sự kết hợp tối ưu giữa các API Nền tảng Google Maps để tạo ra trải nghiệm người dùng bộ định vị tuyệt vời. 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 mà họ cần để đưa ra quyết định và chỉ đường cho họ, dù họ đang lái xe, đi xe đạp, đi bộ hay đi bằng phương tiện công cộng.
Đối với người dùng Locator Plus, trang tổng quan số liệu 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, cung cấp cho bạn thông tin rõ ràng về mức độ tương tác của người mua sắm với công cụ định vị cửa hàng của bạn. Để truy cập vào báo cáo này, hãy chuyển đến phần Báo cáo 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 phần Báo cáo mức độ tương tác.
Sơ đồ dưới đây cho thấy các API chính liên quan đến việc triển khai Locator Plus. Sơ đồ này cũng cho thấy cơ sở dữ liệu về dữ liệu vị trí của riêng bạn. Bạn có thể kết hợp cơ sở dữ liệu này với Thông tin chi tiết về địa điểm để cung cấp cho người dùng một tập hợp thông tin tốt nhất, đầy đủ 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 với Nền tảng Google Maps.Các phần triển khai
Dưới đây là các phương pháp và tuỳ chỉnh mà chúng tôi sẽ đề cập trong chủ đề 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 dấu sao là một nội dung tùy chỉnh không bắt buộc nhưng nên dùng để cải thiện giải pháp.
| Hiển thị vị trí của bạn trên bản đồ tương tác |
Xây dựng một bản đồ cho phép người dùng xem chi tiết vị trí, di chuyển xung quanh và phóng to và thu nhỏ. Ngoài ra, bạn cũng có thể khám phá giải pháp nhanh của Trình định vị trình tạo để tạo bản đồ một cách nhanh chóng, bao gồm cả việc dễ dàng 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 trên Google Cloud Storage. |
|
| Cung cấp thông tin về địa điểm | Sau khi người dùng tìm thấy các vị trí gần nhất của bạn trên bản đồ, hãy cung cấp cho họ Thông tin chi tiết về địa điểm có ý nghĩa về vị trí để giúp họ đưa ra quyết định. | |
| Hiển thị các vị trí từ chế độ xem 45° | Cung cấp cho người dùng hình ảnh chính xác hơn về vị trí của bạn ở góc nhìn 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 theo nhu cầu để cải thiện trải nghiệm người dùng trên mọi nền tảng và cải thiện độ chính xác của địa chỉ bằng thao tác 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 khoảng cách và thời gian di chuyển cho nhiều điểm xuất phát và điểm đến, tùy ý chỉ định nhiều phương thức di chuyển, chẳng hạn như đi bộ, lái xe hoặc đạp xe. | |
| Giúp người dùng đặt lịch hẹn |
Cho phép người dùng đặt lịch hẹn trên bảng điều khiển bên của mục Thông tin chi tiết về địa điểm. Ngoài ra, bạn cũng có thể khám phá giải pháp nhanh của Trình định vị trình tạo để tạo bản đồ một cách nhanh chóng, bao gồm cả việc dễ dàng 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 trên Google Cloud Storage. |
|
| Hiển thị các ưu đãi tại địa phương | Cho người dùng thấy những ưu đãi tại địa phương có thể nhấp trong bảng điều khiển bên của mục Thông tin chi tiết về địa điểm. | |
| Cung cấp thông tin đường đi | Xem dữ liệu chỉ đường từ điểm đến đến điểm đến bằng nhiều phương tiện giao thông như đi bộ, lái xe, đi xe đạp và phương tiện công cộng. | |
| Tuỳ chỉnh bản đồ của bạn | Tạo điểm đánh dấu bản đồ tùy chỉnh để giúp vị trí của bạn nổi bật và tạo kiểu bản đồ 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 cụ thể (CUE) trên bản đồ của bạn để giúp người dùng tự định hướng tốt hơn và kiểm soát mật độ POI để ngăn sự lộn xộn của bản đồ. | |
| Thu thập thông tin chi tiết về việc sử dụng thông qua số liệu phân tích | Định cấu hình và sử dụng Google Analytics để có được thông tin chi tiết về chiến lược định vị và cách triển khai của bạn. | |
| Gửi đường đi đến thiết bị di động | Ngoài việc hiển thị chỉ đường trên công cụ định vị, bạn cũng có thể gửi chỉ đường đến điện thoại của người dùng để điều hướng bằng cách sử dụng Google Maps khi đang di chuyển. | |
| Hiển thị Chế độ xem phố để giúp người dùng hình dung được vị trí | Hãy cung cấp cho người dùng hình ảnh Chế độ xem phố với chế độ xem 360 độ để định hướng hiệu quả hơn và giúp họ 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 thông tin vị trí địa lý | Nếu bạn không muốn dựa vào dịch vụ vị trí trên thiết bị, hãy sử dụng Vị trí địa lý để giúp xác định vị trí người dùng. | |
| Kết hợp dữ liệu vị trí tùy chỉnh với Thông tin chi tiết về địa điểm | Kết hợp thông tin chi tiết về vị trí tùy chỉnh của bạn với Thông tin chi tiết về địa điểm để cung cấp cho người dùng một tập dữ liệu phong phú nhằm đưa ra quyết định. |
Hiển thị vị trí của bạn trên bản đồ tương tác
Bộ đị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ể thiếu một bản đồ đơn giản, trong đó yêu cầu người dùng rời khỏi trang web hoặc ứng dụng để tìm một vị trí lân cận. Điều này có nghĩa là trải nghiệm kém tối ưu cho những người dùng phải điều hướng giữa các trang để có được thông tin mà họ yêu cầu. Thay vào đó, bạn có thể nâng cao trải nghiệm này bằng cách nhúng và tùy chỉnh bản đồ vào ứng dụng.
Có nhiều cách để thực hiện việc này: (1) sử dụng giải pháp tạo nhanh bộ định vị bổ sung để cung cấp chức năng này ngay từ đầu và (2) sử dụng phương thức triển khai Maps động của riêng bạn. Phần này mô tả chi tiết các tùy chọn này.
Sử dụng Công cụ định vị trình tạo nhanh Plus
Bạn có thể sử dụng giải pháp Công cụ định vị nhanh của Trình tạo nhanh để nhập thông tin chi tiết về doanh nghiệp từ Trang doanh nghiệp của mình. Do đó, thay đổi về thông tin doanh nghiệp trong Trang doanh nghiệp sẽ được thể hiện 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ờ mở cửa, thông tin liên hệ, ảnh, các tuỳ chọn dịch vụ và nhiều thông tin khác. Trình tạo nhanh có thể cho phép bạn khám phá nhanh cách thiết lập địa điểm doanh nghiệp trên bản đồ, tạo mã có thể triển khai hoặc triển khai trực tiếp lên Google Cloud Storage chỉ trong vài phút.
Sử dụng phương thức triển khai Maps động của riêng bạn
| Ví dụ này sử dụng: API JavaScript | Cũng có mặt: Android | iOS |
Bạn có thể thêm một bản đồ động vào trang của mình – tức là một bản đồ mà người dùng có thể di chuyển, phóng to và thu nhỏ, cũng như xem thông tin chi tiết về các vị trí và địa điểm yêu thích – bằng một vài dòng mã.
Trước tiên, bạn cần đưa API JavaScript của Maps vào trang. Bạn có thể thực hiện việc này bằng cách liên kết tập lệnh sau trên trang HTML.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
URL này tham chiếu hàm initMap của JavaScript chạy khi trang tải. Trong URL này, bạn cũng có thể xác định ngôn ngữ hoặc khu vực của bản đồ để đảm bảo ngôn ngữ hoặc khu vực đó được định dạng đúng cách cho quốc gia cụ thể mà bạn đang nhắm đến. Việc thiết lập một khu vực cũng đảm bảo rằng hành vi của các ứng dụng sử dụng bên ngoài Hoa Kỳ có xu hướng áp dụng cho khu vực mà bạn đặt. Hãy xem Thông tin chi tiết về phạm vi bao phủ của nền tảng Google Maps để 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ề việc sử dụng thông số region.
Tiếp theo, bạn cần có HTML div để đặ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 của 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,
trong ví dụ sau, bạn có thể đặt vị trí ban đầu,
loại bản đồ và
những chế độ kiểm soát có sẵn trên bản đồ cho người dùng. Lưu ý rằng
getElementById() tham chiếu "map" mã div ở trên.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}
Đối với bộ định vị, bạn thường muốn đặt vị trí ban đầu, điểm trung tâm hoặc giới hạn và mức thu phóng (mức độ phóng to của bản đồ vào vị trí đó). Hầu hết các phần tử khác, chẳng hạn như tinh chỉnh các nút điều khiển, 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: API Địa điểm | Cũng có: 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 của vị trí đó. Để tìm nạp thông tin mà Nền tảng Google Maps có về địa điểm đó (bao gồm tọa độ địa lý và thông tin do người dùng đóng góp), hãy tìm 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ể thực hiện lệnh gọi tới điểm cuối của dịch vụ Tìm địa điểm trong tính năng Tìm kiếm địa điểm của API Địa điểm và chỉ yêu cầu trường place_id. Sau đây là ví dụ về cách yêu cầu cung cấp mã địa điểm cho văn phòng của Google London:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Bạn có thể lưu trữ mã địa điểm này trong cơ sở dữ liệu và dùng mã này để yêu cầu thông tin về địa điểm một cách hiệu quả. Sau đây là hướng dẫn về việc sử dụng mã địa điểm để mã hoá địa lý, truy xuất thông tin chi tiết về địa điểm và yêu cầu chỉ đường đến địa điểm đó.
Mã hoá địa lý các vị trí của bạn
| Ví dụ này sử dụng: API mã hóa địa lý | Cũng có: JavaScript |
Nếu cơ sở dữ liệu vị trí của bạn có địa chỉ đường phố nhưng không có tọa độ địa lý, hãy sử dụng API Mã hóa địa lý để lấy vĩ độ và kinh độ của địa chỉ đó cho mục đích đặt điểm đánh dấu trên bản đồ. Bạn có thể mã hoá địa chỉ các địa chỉ của mình ở phía máy chủ, lưu trữ vĩ độ và kinh độ trong cơ sở dữ liệu của bạn và làm mới ít nhất 30 ngày một lần.
Sau đây là ví dụ về cách sử dụng API Mã hóa địa lý để lấy vĩ độ và kinh độ của mã địa điểm mà văn phòng Google London trả về:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a
Thêm vị trí vào bản đồ
Bước tiếp theo là thêm 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 vào bản đồ, mặc dù bạn có thể sử dụng một số tuỳ chọn khác như các lớp dữ liệu.
Sau khi bạn có vĩ độ và kinh độ cho vị trí của mình, hãy tham khảo ví dụ về cách thêm điểm đánh dấu vào bản đồ:
var marker = new google.maps.Marker({
position: { lat: 51.493073, lng: -0.146550 },
label:"A",
title:"Location Name"
});
// To add the marker to the map, call setMap();
marker.setMap(map);
Chỉ với một vài điểm đánh dấu, bạn có thể nhìn thấy vị trí của một số vị trí cùng nhau.
Nếu số lượng vị trí lớn, bạn có thể cân nhắc sử dụng tiện ích phân nhóm đánh dấu cho JavaScript, Android hoặc iOS. Đây là một ví dụ về việc nhóm các điểm đánh dấu trong mẫu GitHub của bộ định vị cửa hàng JavaScript.
Cung cấp thông tin về địa điểm
| Ví dụ này sử dụng: API JavaScript của Maps | Cũng có: API | 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ọ đến một trong những vị trí của bạn. Với Thông tin chi tiết về địa điểm, 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 sẽ biết chính xác những thông tin cần biết khi đến địa điểm của bạn. Sau khi gọi API Places, bạn có thể lọc và hiển thị phản hồi trong cửa sổ thông tin, 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 Thông tin chi tiết về địa điểm, bạn sẽ cần mã địa điểm của từng vị trí của bạn. Hãy xem phần Nhận mã địa điểm để truy xuất mã địa điểm của vị trí của bạn.
Mở rộng để xem video yêu cầu Thông tin chi tiết về địa điểm:
Xem giờ mở cửa
Kiểm tra trạng thái đóng cửa
Chi phí kiểm soát
Ví dụ sau sử dụng Thư viện địa điểm, API JavaScript cho Maps để truy xuất Thông tin chi tiết về địa điểm và thêm các thông tin đó vào một Cửa sổ thông tin. Cách triển khai này sử dụng chiến lược tiết kiệm chi phí để kích hoạt yêu cầu Thông tin chi tiết về địa điểm khi người dùng yêu cầu chi tiết bằng cách nhấp vào điểm đánh dấu thay vì tìm nạp trước thông tin chi tiết cho tất cả các địa điểm bất kể mối quan tâm của người dùng.
const marker = new google.maps.Marker({
map,
position: { lat: 51.493073, lng: -0.14655 },
});
const request = {
placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
fields: ["name", "formatted_address", "rating", "website"],
};
const infowindow = new google.maps.InfoWindow();
const service = new google.maps.places.PlacesService(map);
google.maps.event.addListener(marker, "click", function () {
service.getDetails(request, (place, status) => {
if (status === google.maps.places.PlacesServiceStatus.OK && place) {
infowindow.setContent(
"<div><strong>" +
place.name +
"</strong><br>" +
place.formatted_address +
"<br>" +
"Rating: " +
place.rating +
" stars<br>" +
place.website +
"</div>"
);
infowindow.open(map, this);
}
});
});
Hiển thị các vị trí từ chế độ xem 45°
| Ví dụ này sử dụng: API JavaScript của Maps | Cũng có mặt: Android | iOS |
Việc cung cấp cho người dùng thông tin vị trí của bạn từ trên không sẽ giúp họ hiểu rõ hơn về vị trí của khách sạn, thông tin này giúp họ dễ dàng tìm thấy địa điểm đó. Khi người dùng chọn một vị trí duy nhất để xem thêm chi tiết, bạn có thể phóng to vị trí đó để hiển thị hình ảnh vệ tinh hiện có từ góc 45°.
Mã mẫu sau đây sẽ đặt bản đồ ở mức thu phóng cao, loại bản đồ tương thích và một 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° sẽ được giải thích trong tài liệu này.
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 đồ gốc
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. Để tạo điều kiện cho việc này, hãy thêm 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 tương tác trên bản đồ hoặc trong chế độ xem danh sách. Ví dụ: việc nghe sự kiện zoom_changed trên đối tượng map cho biết người dùng đã thu nhỏ theo cách thủ công từ chế độ xem chi tiết hoặc đã gọi một hàm khác đã cập nhật mức thu phóng. Trong ví dụ này, tính năng thu nhỏ sẽ đặt lại bản đồ về loại bản đồ ban đầu và nghiêng.
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: API JavaScript của Maps | Cũng có mặt: Android | iOS |
Thành phần chính tiếp theo trong mọi bộ đị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à vị trí địa lý của trình duyệt web để yêu cầu người dùng cấp quyền đặt vị trí ban đầu làm vị trí hiện tại của người dùng. Tuy nhiên, người dùng có thể từ chối những quyền đó hoặc muốn đặt một vị trí khác làm điểm xuất phát.
Hiện nay, người dùng đã quen với chức năng tự động hoàn thành trước khi nhập trên phiên bản Google Maps dành cho người dùng thông thường. Chức năng này có thể được tích hợp vào mọi ứng dụng bằng cách sử dụng thư viện Địa điểm của nền tảng Google Maps 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 thư viện Địa điểm.
Việc thêm thư viện Tự động hoàn thành vào trang web của bạn chỉ là thêm một vài tham số truy vấn vào URL của tập lệnh API JavaScript trên Maps. Trong ví dụ
sau, phần bổ sung là libraries=places.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Tiếp theo, hãy thêm hộp văn bản vào trang của bạn để người dùng nhập liệu.
<input id="autocomplete" placeholder="Enter starting
address, city, or zip code" type="text"></input>
Cuối cùng, bạn cần khởi chạy dịch vụ Tự động hoàn thành và liên kết dịch vụ đó với hộp văn bản đã đặt tên.
Ràng buộc
tính năng Tự động hoàn thành cụm từ gợi ý thành các loại mã hoá địa lý sẽ định cấu hình trường nhập dữ liệu
để chấp nhận địa chỉ đường phố, khu phố, thành phố và mã bưu chính. Nhờ vậy, người dùng có thể nhập mọi mức độ cụ thể để mô tả nguồn gốc. Hãy nhớ yêu cầu trường geometry để phản hồi có chứa vĩ độ và kinh độ của nguồn gốc của người dùng. Bạn sẽ sử dụng các tọa độ bản đồ này để căn giữa bản đồ gần hơn và cho biết mối quan hệ của các vị trí của bạn với điểm xuất phát.
// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
componentRestrictions: {'country': ['gb']},
fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", addUserLocation);
}
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 hình dạng của kết quả phù hợp (vị trí của người dùng), sau đó di chuyển bản đồ đến vị trí đó và thêm điểm đánh dấu.
function addUserLocation() {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
// Add a marker to the map.
const marker = new google.maps.Marker({
map: map
});
marker.setLabel("C");
marker.setPosition(place.geometry.location);
// Zoom the map to the marker.
map.panTo(place.geometry.location);
map.setZoom(12);
}
Sau đó, bạn có thể thấy mối quan hệ giữa người dùng và bất kỳ vị trí cụ thể nào, như minh họa trong hình sau.
Hãy mở rộng phần này để xem 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
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: API ma trận khoảng cách | Cũng có: Dịch vụ ma trận khoảng cách, API JavaScript cho Maps |
Sau khi có thông tin vị trí của người dùng, bạn có thể so sánh thông tin này với vị trí của bạn. Khi thực hiện việc này bằng Dịch vụ ma trận khoảng cách, API JavaScript của Maps sẽ giúp người dùng của bạn chọn vị trí thuận tiện nhất cho họ bằng cách lái xe hoặc đi theo khoảng cách.
Hiển thị vị trí gần người dùng có nghĩa là bạn đã có 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, mấu chốt 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 chuẩn để sắp xếp danh sách vị trí là sắp xếp theo khoảng cách. Thông thường, khoảng cách này được tính đơn giản bằng cách sử dụng một đườ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ể nằm trên một con sông không thể đi qua hoặc qua những con đường đông đúc tại một thời điểm mà vị trí khác có thể thuận tiện hơn. Điều này rất quan trọng khi có nhiều vị trí cách nhau vài km.
Dịch vụ ma trận khoảng cách hoạt động bằng cách lấy danh sách vị trí xuất phát và vị trí xuất hiện, đồng thời trả về không chỉ khoảng cách di chuyển mà còn thời gian di chuyển giữa các vị trí đó. Trong trường hợp của người dùng, nguồn gốc sẽ là nơi hiện tại hoặc điểm xuất phát mong muốn của họ và điểm đến sẽ là vị trí. Nguồn gốc và điểm đến có thể được chỉ định làm cặp toạ độ hoặc địa chỉ; sau đó sẽ được so khớp khi dịch vụ được gọi. Bạn có thể sử dụng Ma trận khoảng cách với một số thông số bổ sung để hiển thị 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 Dịch vụ ma trận khoảng cách, xác định nguồn gốc và vị trí của người dùng. Ví dụ này cho biết khoảng cách từ trung tâm bản đồ đến ba văn phòng của Google ở London.
Tham chiếu nhanh về mã hoá URL: %2C = , (phẩy), %3A = : (dấu hai chấm),
và %7C = | (pipe).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_a
Dưới đây là phiên bản bạn có thể sao chép và chạy:
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a
Phản hồi thực tế từ dịch vụ sẽ là một danh sách các địa chỉ, khoảng cách và thời lượng trùng khớp, tương tự như trong ví dụ sau:
Mở rộng để xem phản hồi mẫu:
{
"destination_addresses": [
"123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
"1-13 St Giles High St, West End, London WC2H 8AG, UK",
"6 Pancras Square, Kings Cross, London N1C 4AG, UK"
],
"origin_addresses": [
"Unnamed Road, London, UK"
],
"rows": [
{
"elements": [
{
"distance": {
"text": "4.5 km",
"value": 4540
},
"duration": {
"text": "15 mins",
"value": 924
},
"status": "OK"
},
{
"distance": {
"text": "5.0 km",
"value": 5043
},
"duration": {
"text": "17 mins",
"value": 1044
},
"status": "OK"
},
{
"distance": {
"text": "6.9 km",
"value": 6919
},
"duration": {
"text": "23 mins",
"value": 1357
},
"status": "OK"
}
]
}
],
"status": "OK"
}
Hình ảnh sau đây cho thấy điểm gốc (đ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 tuyến đường thường khác nhau, như được minh họa trong bảng sau.
| Vị trí | Khoảng cách thẳng | Đường lưu thông / Thời gian |
|---|---|---|
| Vị trí A | 3,32 km | 4,5 km / 15 phút |
| Vị trí B | 3,20 km | 5,0 km / 17 phút |
| Vị trí C | 4,84 km | 6,9 km / 23 phút |
Mặc dù Vị trí B là khoảng cách gần nhất, nhưng tuyến đường và thời gian để đến đó sẽ dài hơn vì bạn có thể đi vào vị trí A bằng đường cao tốc.
Sau khi đưa ra yêu cầu này, bạn có thể xử lý yêu cầu so khớp để sắp xếp phản hồi theo thời gian lái xe. Bạn có thể tìm thấy ví dụ về một hàm như vậy trong lớp học lập trình định vị.
Cung cấp đường đi theo chỉ dẫn
| Ví dụ này sử dụng: Dịch vụ chỉ dẫn API JavaScript của Maps | Cũng có sẵn: Dịch vụ web API đường đi để sử dụng trên Android và iOS, trực tiếp từ ứng dụng hoặc từ xa thông qua proxy máy chủ |
Việc cho người dùng thấy đường đi từ bên trong trang web hoặc ứng dụng của bạn có nghĩa là họ không cần di chuyển khỏi trang web của bạn, nghĩa là người dùng sẽ không bị sao lãng với các trang khác hoặc thấy đối thủ cạnh tranh trên bản đồ. Thậm chí, bạn có thể hiển thị lượng khí thải cacbon của phương tiện đi lại cụ thể và cho thấy tác động của mọi hành trình cụ thể.
Dịch vụ chỉ đường cũng có các hàm cho phép bạn xử lý kết quả và hiển thị các kết quả đó dễ dàng trên bản đồ.
Sau đây là ví dụ về cách hiển thị bảng điều khiển đường đi. Để biết thêm thông tin về mẫu, hãy xem nội dung Hiện đường đi văn bản.
Để 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ề API JavaScript cho Maps hoặc xem các lớp học lập trình từng bước để tạo một bộ định vị.
Giúp người dùng đặt lịch hẹn
Khi người dùng xem thông tin chi tiết về Địa điểm của bạn trong bảng điều khiển bên, bạn có thể thuận tiện đặt lịch hẹn bằng cách nhấp vào nút, được minh họa 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 Bộ định vị nhanh của Builder để cung cấp chức năng này ngay lập tức và (2) sử dụng Trang doanh nghiệp. Phần này mô tả chi tiết các tùy chọn này.
Sử dụng Công cụ định vị trình tạo nhanh Plus
Bạn có thể sử dụng giải pháp Công cụ định vị nhanh của Trình tạo nhanh để dễ dàng nhập thông tin chi tiết về doanh nghiệp từ Trang doanh nghiệp của bạn. Sau khi được 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 trước lịch hẹn được nhúng (nếu có) cho địa điểm doanh nghiệp của mình thông qua Đặt chỗ bằng Google. Ngay cả khi chưa liên kết Trang doanh nghiệp với một Tài khoản Google, bạn vẫn có thể sử dụng Trình tạo nhanh để nhúng các đường liên kết đặt trước cho những doanh nghiệp bạn đã cho phép các nhà cung cấp dịch vụ đặt trước của bên thứ ba sử dụng 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, nơi các doanh nghiệp hoạt động với một nhà cung cấp dịch vụ đặt trước được hỗ trợ. Nếu bạn quan tâm đến tính năng Đặt chỗ bằng Google nhưng hiện chưa hợp tác với một đối tác Đặt chỗ bằng Google, vui lòng hướng dẫn nhà cung cấp của bạn bày tỏ sự quan tâm bằng cách hoàn tất biểu mẫu này và xem lại tài liệu của chúng tôi để biết cách bắt đầu. Nếu chưa hợp tác với một nhà cung cấp dịch vụ đặt trước, bạn có thể thấy các nhà cung cấp đủ điều kiện trong phần Đặt trước 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 của mình bằng Trang doanh nghiệp, các vị trí doanh nghiệp bạn tạo được liên kết với mã địa điểm Nền tảng Google Maps để bật chức năng lập bản đồ tích hợp với dữ liệu doanh nghiệp.
API Trang doanh nghiệp 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, nhưng yêu cầu một số bước thủ công để bật tính năng này, như mô tả bên dưới.
Khi người dùng xem thông tin chi tiết về địa điểm 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 đườ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 API Trang doanh nghiệp
placeActionLinkcho vị trí thuộc loạiAPPOINTMENT,ONLINE_APPOINTMENThoặcDINING_RESERVATION.placeActionLinksẽ là đối tượng mà bạn sử 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 thao tác đặt lịch hẹn mà mình muốn, hãy chuyển sang bước tiếp theo.) Dưới đây là phản hồi mẫu từ thao tác POST thành côngplaceActionLinks.create:{ "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í trong Trang doanh nghiệp liên kết với mã địa điểm trên Nền tảng Google Maps.
Khi người dùng xem Thông tin chi tiết về địa điểm, họ đang xem thông tin chi tiết về một mã địa điểm trên Nền tảng Google Maps. Mã địa điểm được liên kết với một mã vị trí trong Trang doanh nghiệp. Vì vậy, bạn cần phải 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 lịch hẹn mà bạn đã tạo. Thực hiện các lệnh gọi API Trang doanh nghiệp sau đây:
- Liệt kê các tài khoản của dự án.
- Liệt kê tất cả vị trí trong một tài khoản.
- Trong các vị trí tài khoản,
LocationKeychứa ID địa điểm của Nền tảng Google Maps, bạn có thể so sánh với ID địa điểm cho 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 lịch hẹn hiện có, hãy liệt kê
placeActionLinkshiện có cho vị trí đó và lọcplaceActionTypeđể tìm đường liên kết đến cuộc hẹn mà bạn muốn sử dụng (APPOINTMENT,ONLINE_APPOINTMENThoặcDINING_RESERVATION).Ví dụ sau đây cho thấy một ĐIỂM
placeActionLinktrong 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 dữ liệu
<div>vào bảng điều khiển bên bằng dữ liệu có liên quan từ đối tượngplaceActionLink, đặc biệt là URI cho đường liên kết đặt phòng chỉ định.
Các lựa chọn thay thế khác để thêm đường liên kết cuộc hẹn
Nếu bạn không quản lý một Trang doanh nghiệp hoặc không muốn sử dụng giải pháp Quick Locator Plus, hãy kiểm tra nền tảng đặt lịch hẹn để xem tài liệu về việc nhúng tiện ích đặt phòng vào một 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).
Đăng các ưu đãi tại địa phương
Trong bảng điều khiển bên Chi tiết địa điểm dành cho một vị trí, bạn có thể hiển thị các ưu đãi tại địa phương để người dùng nhấp vào. API Google Doanh nghiệp của tôi cho phép bạn tạo và truy xuất "posts" (chẳng hạn như ưu đãi tại địa phương) được liên kết với các vị trí của bạn. Hình bên dưới cho thấy ví dụ về ưu đãi tại địa phương trong bảng điều khiển bên của mục Chi tiết địa điểm.
(Sơ đồ cấu trúc trong phần trước cho thấy các công nghệ có sẵn để thêm ưu đãi vào bộ định vị.)
Vì ưu đãi tại địa phương được liên kết với các vị trí, nên bạn cần phải tìm mã vị trí trong Trang doanh nghiệp
được liên kết với mã địa điểm trên Nền tảng Google Maps cho vị trí mà người dùng
đang xem.
Khi có mã vị trí trong Trang doanh nghiệp, bạn có thể truy xuất mặt hàng có liên quan dưới dạng một localPost để hiển thị trong bảng điều khiển bên của mục Thông tin chi tiết về địa điểm. Sau đây là các bước:
- Với API Google Doanh nghiệp của tôi, hãy tạo mọi bài đăng về ưu đãi mà bạn muốn hiển thị, thuộc loại
OFFER. -
Tìm vị trí / mã vị trí trong Trang doanh nghiệp liên kết với mã địa điểm trên bản đồ.
Khi người dùng xem Thông tin chi tiết về địa điểm, họ đang xem thông tin chi tiết về một mã địa điểm trên Nền tảng Google Maps. Mã địa điểm được liên kết với một mã vị trí trong Trang doanh nghiệp. Vì vậy, bạn cần phải 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 ưu đãi tại địa phương cho vị trí của bạn. Thực hiện các lệnh gọi API Trang doanh nghiệp sau đây:
- Liệt kê các tài khoản của dự án.
- Liệt kê tất cả vị trí trong một tài khoản.
- Trong các vị trí tài khoản,
LocationKeychứa mã địa điểm của bản đồ. Bạn có thể so sánh mã địa điểm này với mã địa điểm của địa điểm đang được xem.
Sau đây là ví dụ về một yêu cầu liên quan đến thông tin chi tiết về vị trí trong API Trang doanh nghiệp:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
Phản hồi chứa trường
locationKey, là mã địa điểm mà bạn có thể sử dụng cùng với các yêu cầu Nền tảng Google Maps.Hãy mở rộng để xem phản hồ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, khi đã có mã vị trí, bạn có thể sử dụng ưu đãi mà mình muốn. Để truy xuất một bài đăng hiện có về ưu đãi, hãy liệt kê
localPostshiện có của vị trí và lọctopicTypetrong sốOFFERđể tìm nội dung ưu đãi mà bạn muốn sử dụng.Dưới đây là yêu cầu mẫu để liệt kê các Bài đăng cục bộ đ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
OFFERlocalPosttrong phản hồi.Hãy mở rộng để xem phản hồ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
<div>vào bảng điều khiển bên bằng cách sử dụng dữ liệu liên quan từ đối tượnglocalPost.
Tùy chỉnh bản đồ của bạn
Bạn có thể thay đổi giao diện và thông tin chi tiết của bản đồ theo một số cách. Ví dụ như bạn có thể:
- Tạo điểm đánh dấu tùy chỉnh của riêng bạn để thay thế các ghim bản đồ mặc định.
- Thay đổi màu sắc của tính năng bản đồ để phản ánh 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ị (thu hút, món ăn, chỗ ở, v.v.) và mật độ, cho phép bạn tập trung sự chú ý của người dùng vào các vị trí của mình, đồng thời làm nổi bật các địa danh giúp người dùng đến địa điểm gần nhất.
Tạo điểm đánh dấu bản đồ tùy chỉnh
Bạn có thể tùy chỉnh điểm đánh dấu của mình bằng cách thay đổi màu mặc định (có thể cho biết một vị trí hiện có mở cửa hay không) hoặc thay thế điểm đánh dấu bằng một hình ảnh tùy chỉnh, chẳng hạn như biểu tượng của thương hiệu của bạn. Cửa sổ thông tin, hoặc cửa sổ bật lên, 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 thậm chí là ảnh. Bạn cũng có thể tạo các điểm đánh dấu tùy chỉnh: đường quét, vectơ, có thể kéo và thậm chí là ảnh động.
Dưới đây là bản đồ mẫu sử dụng điểm đánh dấu tuỳ chỉnh. (Xem mã nguồn trong chủ đề điểm đánh dấu tùy chỉnh API JavaScript cho Maps.)
Để biết thông tin chi tiết, hãy xem tài liệu về điểm đánh dấu cho JavaScript (web), Android và iOS.
Tạo kiểu cho bản đồ của bạn
Nền tảng Google Maps cho phép bạn tạo kiểu cho bản đồ của mình 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 nhấn mạnh thương hiệu của mình. Ví dụ: bạn có thể thay đổi màu bản đồ để phù hợp với thương hiệu của mình và bạn có thể giảm sự phân tâm trên bản đồ bằng cách kiểm soát các địa điểm yêu thích hiển thị cho người dùng. Google Maps Platform cũng cung cấp một số mẫu bản đồ khởi động, một số mẫu được tối ưu hóa cho các ngành khác nhau, 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 Google Cloud Console trong dự án của mình.
Mở rộng để xem ảnh động về việc tạo kiểu và định kiểu cho bản đồ trong Cloud Console:
Kiểu bản đồ ngành
Ảnh động này hiển thị các kiểu bản đồ dành riêng cho từng ngành mà bạn có thể sử dụng. Các kiểu này mang lại một điểm khởi đầu tối ưu cho từng loại ngành. Ví dụ: kiểu bản đồ Bán lẻ làm giảm các địa điểm yêu thích trên bản đồ, cho phé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 được vị trí gần nhất một cách nhanh chóng và tự tin nhất có thể.
Kiểm soát địa điểm yêu thích
Ảnh động này sẽ đặt màu đá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 nhiều điểm đánh dấu điểm yêu thích xuất hiện trên bản đồ.
Mỗi kiểu bản đồ có một mã riêng. Sau khi phát hành một kiểu trong Cloud Console, bạn tham chiếu mã nhận dạng bản đồ đó trong mã của mình – tức là bạn có thể cập nhật mộ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 các nền tảng. Các ví dụ sau đây minh hoạ cách thêm mã bản đồ vào một trang web bằng API JavaScript của Maps.
Bằng cách đưa một hoặc nhiều map_ids vào URL của tập lệnh, API JavaScript của Maps sẽ tự động cung cấp những kiểu đó để hiển thị bản đồ nhanh hơn khi bạn gọi các kiểu đó trong mã.
<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>
Mã sau đây hiển thị một bản đồ đã được tạo kiểu trên trang web. (Không hiển thị là phần tử HTML HTML <div id="map"></div> sẽ xuất hiện trên trang này.)
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 kiểu bản đồ trên đám mây trong JavaScript (web), Android và iOS.
Thu thập thông tin chi tiết về việc sử dụng thông qua số liệu phân tích
Khi sử dụng số liệu phân tích, bạn có thể thu được những thông tin chi tiết có giá trị về cách người dùng đang tương tác với bộ định vị của bạn. Phần này cung cấp hướng dẫn về cách định cấu hình và theo dõi số liệu phân tích của Google Analytics và Trang doanh nghiệp để theo dõi những dữ liệu mà bạn quan tâm nhất. Đối với người dùng Quick Builder 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, cung cấp cho bạn hình ảnh về 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 của bạn, 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 trong Cloud Console. Để biết thêm thông tin chi tiết về báo cáo này, hãy xem phần báo cáo tương tác.
Do sức mạnh và sự linh hoạt của Google Analytics, chúng tôi sẽ không cố gắng cung cấp thông tin thiết lập và sử dụng toàn diện. Thay vào đó, chúng tôi sẽ chỉ cho bạn tài liệu chính để đọc thêm và hướng dẫn, đồng thời nêu bật những điểm quan trọng cần phân tích trong ứng dụng định vị của bạn.
Thiết lập Google Analytics
Nếu bạn đã sử dụng Google Analytics với ứng dụng, bạn có thể bỏ qua phần này.
Sau đây là ví dụ về “Thẻ toàn cầu” mà bạn dán trên trang web để 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 trực tiếp Google Analytics 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 cấu hình triển khai Google Analytics để thực hiện 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ể được đo lường độc lập với lượt xem trang trên 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 tùy chỉnh
Sau đây là ví dụ về cách xác định sự kiện tuỳ chỉnh trong bộ định vị của bạn:
gtag('event', 'location', {
'method': 'address'
});
Điều quan trọng là bạn phải đặt tên rõ ràng cho event và method để có thể hiểu được các sự kiện trong báo cáo. Kích hoạt các sự kiện đó cho các 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 và giải quyết trong danh sách thả xuống Tự động hoàn thành như trong hình sau.
Bạn có thể gửi lệnh gọi theo dõi sau đến Google Analytics bằng cách sử dụ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 hơn.)
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 bên dưới cho thấy cách lệnh gọi Google Analytics hiển thị trong chế độ xem Kiểm tra của trình duyệt trên thẻ Mạng. (Nhấp để phóng to).
Bạn có thể xác minh rằng các thẻ sự kiện tuỳ chỉnh đang được thu thập đúng cách bằng cách xem chế độ xem "Thời gian thực" trong Google Analytics. Ví dụ: sự kiện "location" được thiết lập trước đó cho Tự động hoàn thành địa điểm xuất hiện trong Google Analytics như được hiển thị 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ư được minh hoạ trong hình sau. Xin lưu ý rằng bạn phải đợi 24 giờ trước khi truy cập vào báo cáo Sự kiện đầy đủ trong mục Mức độ tương tác và gt; 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 lượng người ghé thăm địa điểm thực tế của mình từ ứng dụng định vị. Ví dụ: Google Analytics cung cấp Lượt ghé thăm cửa hàng thực tế trong Analytics để liên kết số liệu 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 bộ định vị của bạn. 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ư các ưu đãi trực tuyến có thể sử dụng tại các vị trí thực tế của bạn.
Các chỉ số về Trang doanh nghiệp
Ngoài việc theo dõi các sự kiện, chỉ số và thứ nguyên mà bạn quan tâm bằng Google Analytics, Trang doanh nghiệp còn có các chỉ số riêng. Ví dụ: nếu thêm đường liên kết đặt lịch hẹn và đường liên kết ưu đãi tại địa phương vào bộ định vị, bạn có thể nhận được chỉ số về những lượt xem và lượt nhấp đó.
Yêu cầu mẫu sau đây về các API Trang doanh nghiệp yêu cầu nhiều loại chỉ số. Để theo dõi số lượt nhấp vào mặt hàng, các 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"
}
}
}
Hãy mở rộng để xem phản hồ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"
}
}
]
}
]
}
Câu trả lời chứa các chỉ số, đáng chú ý nhất là:
- 1571 lượt xem vị trí 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 vị trí.
- 42
LOCAL_POST_ACTIONS_CALL_TO_ACTIONlần nhấp vào ưu đãi. - 11 lượt xem bài đăng tại địa phương trên Google Tìm kiếm.
Một tuỳ chọn chỉ số khác bao gồm việc sử dụng tính năng Đặt chỗ bằng Google để tạo đường liên kết hành động. Khi người dùng nhấp vào các đườ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 để có thể theo dõi các 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, hoạt động đo lường không chỉ dựa vào việc bạn đang hoạt động như thế nào so với KPI. Những con số này cũng giúp bạn hiểu tác động của những cải tiến này đối với doanh nghiệp của mình. Ngoài ra, bạn có thể so sánh các chỉ số từ Google Analytics trên bộ định vị với các chỉ số trong 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 tìm đường đến từ công cụ định vị và Google Maps để sau đó ghé thăm các vị trí thực tế của bạn.
Nâng cao bộ định vị Plus
Tùy thuộc vào nhu cầu kinh doanh của bạn' hoặc người dùng' bạn có thể nâng cao hơn nữa trải nghiệm người dùng.
Đang gửi đường đi đến thiết bị di động
Để giúp người dùng dễ dàng truy cập một địa điểm, bạn có thể nhắn tin hoặc gửi đường liên kết chỉ đường cho họ qua email. Khi người dùng nhấp vào ứng dụng, ứng dụng Google Maps sẽ chạy trên điện thoại nếu đã được cài đặt hoặc Maps.google.com sẽ tải trong trình duyệt web của thiết bị. Cả hai trải nghiệm này đều cho phép người dùng sử dụng tính năng đi theo chỉ dẫn từng chặng, bao gồm cả hướng dẫn bằng giọng nói, để đến điểm đến.
Sử dụng URL Maps để soạn URL chỉ đường như sau, với tên địa điểm được mã hoá URL là tham số destination và mã địa điểm làm tham số destination_place_id. Bạn không bị tính phí khi soạn hoặc sử dụng URL của Maps, vì vậy, bạn không cần đưa khoá API vào URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Bạn có thể tùy ý cung cấp tham số truy vấn origin bằng cách sử dụng định dạng địa chỉ giống với đích đến. Tuy nhiên, nếu bạn bỏ qua thông tin này, thông tin đường đi sẽ bắt đầu từ vị trí hiện tại của người dùng. Vị trí này có thể khác với vị trí mà người dùng đang sử dụng ứng dụng Locator Plus của bạn. URL của Maps cung cấp các tuỳ chọn tham số truy vấn khác, chẳng hạn như travelmode và dir_action=navigate để chạy thông tin đường đi khi đã bật tính năng đi theo chỉ dẫn.
Đường liên kết có thể nhấp này (mở rộng URL mẫu ở trên) đặt origin làm sân vận động bóng đá của London và sử dụng travelmode=transit để cung cấp đường đi bằng phương tiện công cộng đến điểm đến.
Để gửi một tin nhắn hoặc email có chứa URL này, bạn nên 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ể sử 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.
Đang hiển thị Chế độ xem phố để giúp người dùng hình dung được các vị trí
Đối với nhiều vị trí trên thế giới, Bạn có thể sử dụng Chế độ xem phố để hiển thị bên ngoài một vị trí, cung cấp cho người dùng hình ảnh về vị trí đó trước khi họ đến. Bạn có thể cung cấp Chế độ xem phố dưới dạng tương tác (web) hoặc tĩnh (API), tùy thuộc vào việc bạn muốn người dùng của mình trích xuất và xem bản đồ ở mức độ 360 độ hay không. Chế độ xem phố cũng được cung cấp cho Android và iOS.
Xác định vị trí của người dùng bằng vị trí địa lý
Trong hầu hết trường hợp, bạn có thể xác định vị trí của người dùng bằng các dịch vụ vị trí tích hợp sẵn trong thiết bị hoặc trình duyệt của họ. Chúng tôi cung cấp một ví dụ về cách sử dụng tính năng Vị trí đị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 cũng như tài liệu về yêu cầu cấp quyền và thông tin vị trí trong Android và iOS. Tuy nhiên, có thể có những trường hợp bạn muốn trình tìm kiếm vị trí thay thế; ví dụ: nếu dịch vụ vị trí của thiết bị bị tắt hoặc bạn lo ngại về việc vị trí thiết bị bị giả mạo.
API vị trí địa lý 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 tính năng Vị trí địa lý làm cơ chế sao lưu để xác định vị trí của người dùng hoặc sử dụng tính năng này để kiểm tra chéo vị trí mà thiết bị báo cáo.
Kết hợp dữ liệu vị trí tùy chỉnh với Chi tiết địa điểm
Trong phần Cung cấp thông tin chi tiết về địa điểm trước đó, chúng tôi đã đề cập đến việc sử dụng Thông tin chi tiết về địa điểm để 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á.
Sẽ hữu ích nếu bạn hiểu chi phí của các trường dữ liệu khác nhau trong Chi tiết địa điểm, được phân loại là Dữ liệu cơ bản, Liên hệ và Dữ liệu không khí. Để 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 (thường là Dữ liệu cơ bản và Dữ liệu liên hệ) từ Google Maps như đóng cửa tạm thời, giờ mở cửa vào ngày lễ và xếp hạng của người dùng, ảnh và bài đánh giá. Nếu đã có thông tin liên hệ cho các vị trí của mình, bạn sẽ không cần yêu cầu các trường đó từ Thông tin chi tiết về địa điểm và có thể hạn chế yêu cầu chỉ tìm nạp các trường Dữ liệu cơ bản hoặc Khí quyển tùy thuộc vào nội dung bạn muốn hiển thị.
Bạn có thể có dữ liệu địa điểm của riêng mình để bổ sung hoặc sử dụng thay vì Thông tin chi tiết về địa điểm. Lớp học lập trình về công cụ định vị toàn bộ ngăn xếp cung cấp một ví dụ về cách sử dụng GeoJSON với một cơ sở dữ liệu để lưu trữ và truy xuất thông tin vị trí của riêng bạn.