Tổng quan
Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cung cấp 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 chúng tôi cung cấp các đường liên kết đến tài liệu để triển khai trên các nền tảng khác.
Trình tạo nhanh trong Google Cloud Console giú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ính năng 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 Cloud chỉ trong vài phút.
Người dùng của bạn muốn nghiên cứu các sản phẩm và dịch vụ trực tuyến để tìm ra sản phẩm và dịch vụ tốt nhất vị trí thuận tiện để ghé thăm, đặt lịch hẹn hoặc lấy hàng. Họ muốn đến vị trí của bạn càng nhanh càng tốt và bạn muốn cho trải nghiệm trực tuyến phong phú giúp tăng lượt ghé thăm địa điểm 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 các cuộc gọi yêu cầu hỗ trợ. Bạn cũng muốn đo lường sự 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í và bạn muốn biết cần cải thiện ở đâu.
Locator Plus – các mẹo và hướng dẫn tuỳ chỉnh mà chúng tôi cung cấp trong chủ đề—là những gì chúng tôi đề xuất vì là sự kết hợp tối ưu của Nền tảng Google Maps các API giúp xây dựng trải nghiệm người dùng tuyệt vời cho công cụ định vị. Khi làm theo các 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 để quyết định và chỉ đường cho họ, cho dù họ đang lái xe, đạp xe, đi bộ hoặc sử dụng phương tiện công cộng.
Đối với người dùng Locator Plus, trang tổng quan về số liệu phân tích sẽ giúp bạn phân tích và tạo thông tin chi tiết từ dữ liệu của bạn, giúp bạn 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 của bạn. Để truy cập vào báo cáo này, hãy chuyển đến Mục 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 Báo cáo mức độ tương tác.
Sơ đồ dưới đâ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 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 tập hợp tốt nhất, đầy đủ nhất thông tin 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 Bảng điều khiển Google Cloud: Để biết thêm thông tin về cách thiết lập, hãy xem Bắt đầu sử dụng Nền tảng Google Maps.Các phần triển khai
Sau đây là các phương pháp và cách 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 biện pháp cốt lõi.
- Biểu tượng dấu sao là không bắt buộc nhưng bạn nên tuỳ chỉnh để 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 |
Tạo bản đồ cho phép người dùng xem thông tin chi tiết về vị trí, di chuyển xung quanh và phóng to và thu nhỏ. Hoặc khám phá Giải pháp Quick Builder Locator Plus (Định vị trình tạo nhanh) để nhanh chóng tạo bản đồ, bao gồm cả việc dễ dàng nhập chi tiết doanh nghiệp từ Trang doanh nghiệp trang thông tin, nhúng đường liên kết đặt lịch hẹn và triển khai cho Google Cloud Storage. |
|
| Cung cấp thông tin chi tiết về địa điểm | Sau khi người dùng tìm thấy các vị trí gần bạn nhất của bạn trên bản đồ, hãy cung cấp cho các vị trí đó có ý nghĩa Địa điểm chi tiết về vị trí để giúp họ đưa ra quyết định. | |
| Hiển thị vị trí từ chế độ xem 45° | Cung cấp cho người dùng hình ảnh rõ hơn về vị trí của bạ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 thao tác theo nhu cầu để 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ỉ 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 địa điểm gần nhất | Tính toán khoảng cách di chuyển và thời gian di chuyển cho nhiều điểm xuất phát và điểm đến, tùy ý chỉ định các hình thức di chuyển khác nhau 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 lịch hẹn trong bảng điều khiển bên Chi tiết địa điểm. Hoặc khám phá Giải pháp Quick Builder Locator Plus (Định vị trình tạo nhanh) để nhanh chóng tạo bản đồ, bao gồm cả việc dễ dàng nhập chi tiết doanh nghiệp từ Trang doanh nghiệp trang thông tin, nhúng đường liên kết đặt lịch hẹn và triển khai cho Google Cloud Storage. |
|
| Giới thiệu sản phẩm/dịch vụ tại cửa hàng địa phương | Hiển thị các ưu đãi tại địa phương mà người dùng có thể nhấp vào trong bảng điều khiển bên 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 khởi hành đến điểm đến bằng nhiều hình thức di chuyển chẳng hạn như đi bộ, lái xe, đạp xe và chuyển tuyế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 cho bản đồ để phù hợp với màu sắc của thương hiệu. Hiển thị (hoặc ẩn) các địa điểm yêu thích (POI) cụ thể đang bật 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 để để bản đồ không lộn xộn. | |
| Thu thập thông tin chi tiết về mứ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 để thu thập thông tin chi tiết về chiến lược công cụ định vị của bạn và triển khai. | |
| 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 Google Maps khi đang di chuyển. | |
| Hiển thị Chế độ xem đường phố để giúp người dùng trực quan hoá các vị trí | Cung cấp cho người dùng hình ảnh trong Chế độ xem đường phố với chế độ xem 360 độ để định hướng họ tốt 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 Vị trí địa lý | Nếu bạn không muốn phụ thuộc vào dịch vụ vị trí trên thiết bị, hãy sử dụ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 Thông tin chi tiết về địa điểm | Kết hợp thông tin vị trí tuỳ chỉnh của riêng bạn với Thông tin địa điểm nhằm cung cấp cho người dùng một tập dữ liệu phong phú để đưa ra quyết định. |
Hiển thị vị trí của bạn trên 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ể thiếu ngay cả một bản đồ đơn giản, yêu cầu người dùng rời khỏi trang web hoặc ứng dụng để tìm vị trí. Điều này có nghĩa là trải nghiệm dưới mức tối ưu đối với những người dùng phải điều hướng giữa các trang để có được thông tin chúng 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à tuỳ chỉnh bản đồ vào ứng dụng của bạn.
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 (Định vị trình tạo nhanh) để cung cấp chức năng này ngay từ đầu và (2) sử dụng cách triển khai Bản đồ độ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 vị trình tạo nhanh) để nhập thông tin chi tiết về doanh nghiệp từ Trang doanh nghiệp. Do đó, giờ đây, khi doanh nghiệp thay đổi những thông tin chi tiết về Trang doanh nghiệp của bạn 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 nội dung thay đổi này có thể bao gồm giờ làm việc, thông tin liên hệ, ảnh, các lựa chọn dịch vụ, v.v. Trình tạo nhanh có thể giúp bạn nhanh chóng khám phá cách thiết lập các đị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 cách triển khai Bản đồ động của riêng bạn
| Ví dụ này sử dụng: API JavaScript cho Maps | Cũng có: Android | iOS |
Thêm bản đồ động vào trang của bạn—tức là bản đồ mà người dùng có thể di chuyển xung quanh, phóng to, thu nhỏ và xem thông tin chi tiết về các vị trí và điểm khác nhau sở thích—có thể được thực hiện 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 thông qua việc liên kết tập lệnh sau trong 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 sẽ 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 rằng bản đồ đó được định dạng theo đúng cách cho
quốc gia cụ thể mà bạn đang nhắm đến. Việc thiết lập khu vực cũng đảm bảo rằng hành vi của
các ứng dụng được sử dụng bên ngoài Hoa Kỳ có xu hướng thiên về khu vực bạn đặt ra. Xem
Thông tin chi tiết về phạm vi áp dụng của Nền tảng Google Maps
để xem 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ề
region
.
Tiếp theo, bạn cần có HTML div để đặt bản đồ của mình trên trang.
Đây là nơi bản đồ sẽ được hiển thị.
<div id="map"></div>
Bước tiếp theo là thiết lập chức năng cơ bản cho 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 của tập lệnh. Trong tập lệnh này,
như trong ví dụ sau, bạn có thể đặt
vị trí ban đầu,
loại bản đồ và
chế độ kiểm soát nào sẽ xuất hiện trên bản đồ cho người dùng của bạn. Lưu ý rằng
getElementById() tham chiếu đến "bản đồ" 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 công cụ định vị, bạn thường quan tâm đến việc đặt vị trí ban đầu, trung tâm điểm hoặc giới hạn và mức thu phóng (mức phóng to bản đồ đến địa điểm đó). Thường gặp nhất các yếu tố khác, ví dụ như điều chỉnh các điều khiển, là không bắt buộc khi bạn xác định cấp độ của tương tác với bản đồ.
Đang tải mã địa điểm
| Ví dụ này sử dụng: Places API | 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í đó
vị trí, địa chỉ và số điện thoại của doanh nghiệp. Để tìm nạp thông tin mà Google Maps
Nền tảng có thông tin về địa điểm đó, bao gồm cả toạ độ địa lý và nội dung do người dùng đóng góp
thông tin, 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ể
gọi đến
Tìm điểm cuối đị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. Dưới đây là ví dụ về việc yêu cầu
mã địa điểm của văn phòng 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 của mình và sử dụng thông tin đó như một cách hiệu quả để yêu cầu thông tin về địa điểm. Đang theo dõi hướng dẫn 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ý vị trí của bạn
| Ví dụ này sử dụng: API mã hoá địa lý | Cũng có: JavaScript |
Nếu cơ sở dữ liệu về vị trí của bạn có địa chỉ đường phố nhưng không có toạ độ địa lý, hãy sử dụng API mã hoá địa lý để lấy vĩ độ và kinh độ của địa chỉ đó cho mục đích của việc đặt điểm đánh dấu trên bản đồ. Bạn có thể mã hoá địa lý 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 mỗi 30 ngày một lần.
Dưới đây là ví dụ về việc sử dụng API mã hóa địa lý để có được 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 điểm đánh dấu vào bản đồ, mặc dù có một số tuỳ chọn khác bạn có thể sử dụng như dữ liệu các lớp.
Sau khi bạn có vĩ độ và kinh độ cho vị trí của mình, sau đây là ví dụ về cách thêm một điểm đánh dấu trên 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);
Với một vài điểm đánh dấu, bạn có thể xem vị trí của một số vị trí cùng lúc.
Nếu có một số lượng lớn các vị trí, bạn có thể xem xét sử dụng cụm điểm đánh dấu tiện ích cho JavaScript, Android hoặc iOS. Sau đây là ví dụ về việc phân cụm điểm đánh dấu trong mẫu GitHub của công cụ định vị cửa hàng JavaScript.
Cung cấp thông tin chi tiết 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ọ ghé thăm một trong vị trí của bạn. Có thông tin chi tiết phong phú về địa điểm chẳng hạn như thông tin liên hệ, giờ làm việc, điểm xếp hạng của người dùng, ảnh của người dùng và trạng thái đóng cửa, người dùng sẽ biết chính xác điều gì sẽ xảy ra khi ghé thăm địa điểm của bạn. Sau khi thực hiện lệnh gọi đến Places API, 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 cần có mã địa điểm của từng vị trí. 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 Chi tiết địa điểm:
Nhận giờ mở cửa
Kiểm tra trạng thái đóng cửa
Kiểm soát chi phí
Ví dụ sau sử dụng Thư viện địa điểm, Maps JavaScript API để truy xuất Chi tiết địa điểm và thêm chúng vào InfoWindow. Triển khai này sử dụng chiến lược tiết kiệm chi phí của chỉ kích hoạt yêu cầu Chi tiết đị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 trên điểm đánh dấu thay vì tìm nạp trước thông tin cho tất cả vị trí sự 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ị vị trí từ chế độ xem 45°
| Ví dụ này sử dụng: API JavaScript của Maps | Cũng có: Android | iOS |
Việc cung cấp cho người dùng chế độ xem vị trí của bạn từ trên không giúp họ hiểu rõ hơn về vị trí đó hình ảnh để họ tìm thấy video dễ dàng hơn. 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ị vệ tinh hiện có hình ảnh từ góc 45°.
Mã mẫu sau đây đặt bản đồ ở mức thu phóng cao, một loại bản đồ tương thích, và góc nghiêng để hiển thị hình ảnh 45° nếu có. Thông tin chi tiết về 45° tình trạng sẵn có của hình ảnh đượ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 một số vị trí lân cận. Để tạo điều kiện cho việc này, hãy thêm
để phát hiện thời điểm người dùng rời khỏi chế độ xem chi tiết trong hoạt động tương tác trên bản đồ hoặc trong
chế độ xem danh sách. Ví dụ: theo dõi sự kiện zoom_changed trên
Đối tượng map
cho biết người dùng đã thu nhỏ khỏi 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, việc thu nhỏ sẽ đặt lại
ánh xạ đến loại bản đồ gốc 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 cho Maps | Cũng có: Android | iOS |
Thành phần chính tiếp theo trong bất kỳ công cụ định vị nào là xác định vị trí xuất phát của người dùng. Theo mặc định, bạn có thể sử dụng dịch vụ vị trí di động và vị trí địa lý của trình duyệt web để yêu cầu quyền của người dùng để đặt nguồn gốc 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 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 nhập ở phía trước đối với người dùng phiên bản Google Maps. Chức năng này có thể được tích hợp vào bất kỳ ứng dụng nào 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 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 bạn bằng cách sử dụng trực tiếp thư viện Địa điểm.
Để thêm thư viện Tự động hoàn thành địa điểm vào trang web của bạn, bạn chỉ cần thêm một vài
tham số truy vấn vào URL của tập lệnh API Maps JavaScript. Trong phần sau
ví dụ: 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 một hộp văn bản vào trang của bạn để người dùng nhập thông tin.
<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 được đặt tên.
Hạn chế
Đặt cụm từ gợi ý của tính năng Tự động hoàn thành theo các loại mã địa lý sẽ định cấu hình trường nhập dữ liệu
để chấp nhận địa chỉ đường phố, vùng lân cận, thành phố và mã bưu điện để người dùng có thể nhập bất kỳ
mức độ cụ thể để mô tả nguồn gốc của chúng. Hãy nhớ yêu cầu geometry
để câu trả lời có chứa vĩ độ và kinh độ tại điểm khởi hành của người dùng. Bạn sẽ sử dụng
các toạ độ bản đồ này để căn giữa bản đồ và chỉ rõ mối quan hệ của các vị trí của bạn với
nguồn gốc.
// 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() là
thực thi. Thao tác này sẽ lấy hình học 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 một đ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ư trong hình sau.
Mở rộng phần này để xem hướng dẫn từng bước bằng video về cách thêm địa điểm Tự động hoàn thành cho ứ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 địa điểm 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 Maps JavaScript |
Sau khi 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 là thế nào. Thực hiện điều này với Dịch vụ ma trận khoảng cách, API Maps JavaScript sẽ giúp người dùng của bạn chọn vị trí thuận tiện nhất cho họ theo thời gian lái xe hoặc đường đi khoảng cách.
Hiển thị vị trí gần người dùng có nghĩa là bạn đã có vị trí của mình được điền sẵn. Khi sử dụng cơ sở dữ liệu vị trí của riêng mình, điều quan trọng là đảm bảo dữ liệu ở định dạng có thể dùng được trên bả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 các vị trí là sắp xếp chúng theo khoảng cách. Thông thường, khoảng cách được tính đơn giản bằng cách sử dụng đường thẳng từ người dùng đến vị trí, nhưng chỉ số 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ể vượt qua hoặc băng qua những con đường đông đúc tại thời điểm khi 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 nhiều vị trí trong phạm vi 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 các vị trí điểm khởi hành và điểm đến và không chỉ trả về khoảng cách di chuyển mà còn là thời gian giữa chúng. Trong trường hợp của người dùng, điểm xuất phát sẽ là nơi họ đang ở hoặc điểm xuất phát mong muốn của họ và sẽ là điểm đến của vị trí. Điểm xuất phát và điểm đến có thể được chỉ định dưới dạng cặp toạ độ hoặc dưới dạng địa chỉ; mã nhận dạng sau sẽ được so khớp khi dịch vụ được gọi. Bạn có thể dùng Ma trận khoảng cách kèm theo 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 gọi Dịch vụ ma trận khoảng cách, chỉ định nguồn gốc của người dùng và các vị trí. Ví dụ này cho thấy khoảng cách từ trung tâm bản đồ đến ba văn phòng của Google tại London.
Tài liệu tham khảo nhanh về mã hoá URL: %2C = , (dấu phẩy), %3A = : (dấu hai chấm),
và %7C = | (dấu sổ thẳng).
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à danh sách địa chỉ, khoảng cách và thời lượng 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 hiển thị điểm khởi hành (đ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ư minh hoạ trong bảng sau.
| Vị trí | Khoảng cách 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,20 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 theo khoảng cách, nhưng tuyến đường và thời gian để đến đó là lâu hơn vì có đường cao tốc có thể đi vào Vị trí A.
Sau khi tạo yêu cầu này, bạn có thể xử lý việc so khớp để sắp xếp các phản hồi theo khoảng thời gian lái xe. Bạn có thể tìm thấy các ví dụ về một hàm như vậy trong công cụ định vị lớp học lập trình.
Cung cấp thông tin đường đi
| Ví dụ này sử dụng: Dịch vụ chỉ đường API Maps JavaScript | Cũng có: API Chỉ đường 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ủ |
Hiển thị cho người dùng thông tin chỉ đường từ bên trong trang web hoặc ứng dụng của bạn có nghĩa là họ không cần điều hướng khỏi trang web của bạn, tức là người dùng sẽ không bị phân tâm với những trang hoặc xem đối thủ cạnh tranh trên bản đồ. Thậm chí, bạn có thể cho biết lượng khí thải carbon của phương tiện đi lại cụ thể và cho biết tác động của một hành trình cụ thể.
Dịch vụ chỉ đường cũng có các chức năng cho phép bạn xử lý kết quả và dễ dàng hiển thị chúng trên bản đồ.
Sau đây là ví dụ về cách hiển thị một bảng điều hướng. Để biết thêm thông tin về mẫu, xem Đang hiện hướng 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 của Maps hoặc xem hướng dẫn từng bước lớp học lập trình để tạo một trình định vị.
Giúp người dùng đặt lịch hẹn
Khi người dùng xem Chi tiết địa điểm của vị trí của bạn trong bảng điều khiển bên, bạn có thể cung cấp thuận tiện cho việc đặt cuộc hẹn bằng cách nhấp vào nút, được 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 (Định vị trình tạo nhanh) để cung cấp chức năng này ngay từ đầu và (2) sử dụng Trang doanh nghiệp. 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 vị trình tạo nhanh) để dễ dà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 tính năng nhúng đường liên kết đặt lịch hẹn (nếu có) cho các địa điểm doanh nghiệp của bạn thông qua Đặ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 trước cho những doanh nghiệp mà bạn đã bật với bên thứ ba nhà cung cấp dịch vụ đặt chỗ thông qua tính năng Đặt chỗ với 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 doanh nghiệp hoạt động với nhà cung cấp dịch vụ đặt chỗ . Nếu bạn quan tâm đến tính năng Đặt trước với Google, nhưng hiện không sử dụng tính năng Đặt trước với đối tác của Google, vui lòng hướng dẫn nhà cung cấp của bạn cho biết sự quan tâm của họ bằng cách hoàn tất biểu mẫu này và xem lại tài liệu để xem cách họ có thể bắt đầu. Nếu chưa hợp tác với nhà cung cấp dịch vụ đặt chỗ, bạn có thể xem nhà cung cấp đủ điều kiện trong mục Đặ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 bằng Trang doanh nghiệp, doanh nghiệp các vị trí bạn tạo được liên kết với mã địa điểm trên Nền tảng Google Maps để bật tích hợp chức năng lập bản đồ với dữ liệu doanh nghiệp.
API Trang doanh nghiệp giú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à xuất hiện trong ứng dụng của bạn, nhưng cần một số bước thủ công để bật tính năng này, như mô tả dưới đây.
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.
-
Sáng tạo một API Trang doanh nghiệp
placeActionLinkcho vị trí của loạiAPPOINTMENT,ONLINE_APPOINTMENT, hoặcDINING_RESERVATION.placeActionLinksẽ là đối tượng bạn 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 hành động cho cuộc hẹn mà bạn muốn, hãy chuyển sang bước tiếp theo.) Dưới đây là câu trả lời mẫu từ một thành côngplaceActionLinks.createThao tác POST:{ "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 Nền tảng Google Maps.
Khi người dùng xem Thông tin chi tiết về địa điểm, họ sẽ xem thông tin về một Nền tảng Google Maps mã địa điểm. Mã địa điểm được liên kết với một mã vị trí trên Trang doanh nghiệp, vì vậy, bạn cần phải tìm mã vị trí dựa vào 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 tài khoản.
- Trong vị trí tài khoản,
LocationKeychứa mã địa điểm trên Nền tảng Google Maps mà bạn có thể so sánh với mã địa điểm của vị trí đang được xem.
-
Với mã vị trí, bạn có thể tạo được đường liên kết hành động mà bạn muốn. Để truy xuất tệp hiện có cuộc hẹn
placeActionLink, liệt kê hiện cóplaceActionLinkscho vị trí rồi lọc đểplaceActionTypeđể 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
placeActionLinkCUỘC HẸN trong phản hồi từ cuộc 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 dữ liệu có liên quan từ vào bảng điều khiển bên
<div>placeActionLink, đặc biệt là URI cho phần đường liên kết đặt lịch hẹn.
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ý hoặc không muốn sử dụng Trang doanh nghiệp giải pháp Quick Builder Locator Plus, kiểm tra nền tảng đặt lịch hẹn của bạn để biết tài liệu về cách nhúng tiện ích đặt lịch hẹn vào một trang web hoặc ứng dụng. Một cách khác là sử dụng Google Cloud, chẳng hạn như Cloud Spanner cho việc quản lý khoảng không quảng cáo (video).
Đăng các sản phẩm/dịch vụ tại địa phương
Trong bảng điều khiển bên Thông tin chi tiết về địa điểm của 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 "bài đăng" (chẳng hạn như ưu đãi tại địa phương) liên kết với các vị trí của bạn. Hình ảnh sau đây cho thấy ví dụ về một mặt hàng tại địa phương trong một Bảng điều khiển bên Thông tin chi tiết về địa điểm.
(Sơ đồ cấu trúc trong phần trước hiển thị các công nghệ có sẵn để thêm ưu đãi vào công cụ định vị của bạn.)
Vì các mặt hàng tại địa phương được liên kết với các địa điểm, nên bạn cần tìm Trang doanh nghiệp
mã vị trí được liên kết với mã địa điểm trên Nền tảng Google Maps cho người dùng vị trí
đang xem.
Khi có mã vị trí trong Trang doanh nghiệp, bạn có thể truy xuất mặt hàng phù hợp dưới dạng
localPost để hiển thị trong bảng điều khiển bên Chi tiết địa điểm. Sau đây là các bước:
- Với API Google Doanh nghiệp của tôi,
tạo bất kỳ bài đăng về ưu đãi nào mà bạn muốn
màn hình, thuộc loại
OFFER. -
Tìm vị trí của Trang doanh nghiệp / mã vị trí được 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ọ sẽ xem thông tin về một Nền tảng Google Maps mã địa điểm. Mã địa điểm được liên kết với một mã vị trí trên Trang doanh nghiệp, vì vậy, bạn cần phải tìm mã vị trí dựa vào mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đến sản phẩm/dịch vụ tại địa phương cho địa điểm 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ủa chúng tôi.
- Liệt kê tất 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 đồ mà bạn có thể so sánh với mã địa điểm của vị trí đang được đã xem.
Sau đây là một yêu cầu mẫu về thông tin chi tiết của một 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
locationKeylà mã địa điểm mà bạn có thể sử dụng với các yêu cầu của 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ể nhận được ưu đãi mà mình muốn. Để truy xuất một Đăng chương trình ưu đãi hiện có, liệt kê
localPostshiện có cho vị trí và lọc chotopicType/OFFERđể tìm nội dung ưu đãi mà bạn muốn sử dụng.Dưới đây là ví dụ về yêu cầu liệt kê các Bài đăng đị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 của bạn.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 sẵn dữ liệu có liên quan vào
<div>vào bảng điều khiển bên từ đối tượnglocalPost.
Tuỳ 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 các đối tượng trên 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 đăng (địa điểm, món ăn, chỗ ở, v.v.) và ở mật độ nào, 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 đánh dấu các địa danh giúp người dùng đến vị trí gần nhất.
Tạo điểm đánh dấu bản đồ tùy chỉnh
Bạn có thể tuỳ 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 liệu một vị trí hiện đang mở) hoặc thay thế điểm đánh dấu bằng một hình ảnh tuỳ chỉnh, như biểu trưng của thương hiệu. 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 tuỳ chỉnh như đường quét, vectơ, kéo được và thậm chí là hình động.
Sau đây là bản đồ mẫu sử dụng điểm đánh dấu tuỳ chỉnh. (Xem mã nguồn trong chủ đề về điểm đánh dấu tuỳ chỉnh cho API Maps JavaScript.)
Để 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 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 dễ dàng tìm thấy địa điểm 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 bản đồ để phù hợp với thương hiệu và bạn có thể giảm gây sao nhãng trên bản đồ bằng cách kiểm soát các địa điểm yêu thích được hiển thị cho người dùng. Nền tảng Google Maps cũng cung cấp của các mẫu bản đồ khởi đầu, một số mẫu trong số đó được tối ưu hoá cho các ngành khác nhau, chẳng hạn như du lịch, kho vậ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 Google Cloud Console Kiểu ánh xạ trong dự án của bạn.
Mở rộng để xem ảnh động về việc tạo và định kiểu bản đồ trong Bảng điều khiển Cloud:
Kiểu bản đồ ngành
Ảnh động này thể hiện các kiểu bản đồ được xác định sẵn theo ngành mà bạn có thể sử dụng. Các mang đến điểm khởi đầu tối ưu cho từng loại ngành. Ví dụ: Kiểu bản đồ bán lẻ 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 vị trí, 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ể.
Kiểm soát địa điểm yêu thích
Ảnh động này đặt màu đánh dấu cho các địa điểm ưa thích và được tăng dần mật độ POI trên kiểu bản đồ. Mật độ càng cao, Điểm đánh dấu địa điểm yêu thích sẽ xuất hiện trên bản đồ.
Mỗi kiểu bản đồ có mã nhận dạng riêng. Sau khi bạn xuất bản một kiểu trong Cloud Console, bạn tham chiếu đến mã bản đồ đó trong mã của mình – tức là bạn có thể cập nhật kiểu bản đồ theo 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 sử dụng trên nhiều nền tảng. Các ví dụ sau đây minh hoạ cách để thêm ID bản đồ vào một trang web bằng cách sử dụng Maps JavaScript API.
Bằng cách bao gồm một hoặc nhiều map_ids trong URL của tập lệnh,
API JavaScript của Maps tự động cung cấp các kiểu đó để 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>
Mã sau đây sẽ hiển thị một bản đồ đã được tạo kiểu trên trang web. (Không hiển thị là HTML
Phần tử <div id="map"></div> mà bản đồ sẽ xuất hiện trên
page.)
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 định kiểu bản đồ dựa trên đám mây trong JavaScript (web), Android, và iOS.
Nắm được thông tin chi tiết về mứ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ể có đượ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ị. Phần này cung cấp hướng dẫn về cách định cấu hình và theo dõi Google Analytics và Số liệu phân tích Trang doanh nghiệp để theo dõi dữ liệu mà bạn quan tâm nhất. Dành cho Trình tạo nhanh Người dùng Locator Plus, một trang tổng quan về số liệu phân tích giúp bạn phân tích và tạo thông tin chi tiết, ả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 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 mức độ tương tác.
Do sức mạnh và tính linh hoạt của Google Analytics, chúng tôi sẽ không cố gắng cung cấp thông tin toàn diện về việc thiết lập và sử dụng. Thay vào đó, chúng tôi sẽ điểm cho bạn các tài liệu quan trọng về đọc thêm và hướng dẫn, đồng thời nêu bật các cân nhắc chính về phân tích để ứ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 thì 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 vào trang web của mình để bật Google Số liệu phân tích.
<!-- 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à hiểu cách sử dụng phương pháp triển khai Google Analytics của bạn để thực hiện những việc sau:
- Kích hoạt các lượt 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 trang web lượt xem trang (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 sự kiện tuỳ chỉnh trong công cụ định vị của bạn:
gtag('event', 'location', {
'method': 'address'
});
Bạn cần phải đặt tên đủ rõ ràng cho event và method
để bạn có thể nắm được các sự kiện trong báo cáo. Kích hoạt họ cho những lượt xem cụ thể
lượt tương tác mà bạn muốn đo lường, chẳng hạn như khi người dùng chọn và xử lý
Danh sách thả xuống của tính năng Tự động hoàn thành, như minh hoạ trong hình sau đây.
Bạn có thể gửi lệnh gọi theo dõi sau đây đến Google Analytics sử dụng sự kiện và mà bạn đã xác định. (Chúng tôi sẽ trình bày mỗi tham số truy vấn trên một dòng riêng để 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 cách lệnh gọi Google Analytics xuất hiện trong công cụ Inspect (Kiểm tra) của trình duyệt chế độ xem, trên tab 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 của mình được thu thập đúng cách bằng cách xem "Thời gian thực" trong Google Analytics. Ví dụ: trường "vị trí" sự kiện được thiết lập trước đó cho Vị trí của tính năng Tự động hoàn thành 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 cách sử dụng DebugView, như trong hình bên dưới. 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 độ 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 để gia tăng lượng người ghé thăm cửa hàng thực tế vị trí từ ứng dụng định vị của bạn. Ví dụ: Google Analytics có Lượt ghé thăm cửa hàng thực tế trong Analytics. Công cụ này cung cấp các liên kết vật lý lượt ghé thăm cửa hàng thực tế số liệu phân tích (do Google Ads đo lường) với số liệu phân tích của công cụ định vị. Bạn cũng có thể phát triển các chiến lược hướng từ ứng dụng đến vị trí của riêng bạn, chẳng hạn như ưu đãi trực tuyến có thể đổi lấy tại địa điểm 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 Google Analytics, Trang doanh nghiệp cũng có các chỉ số riêng. Ví dụ: Nếu thêm đường liên kết đến trang đặt lịch hẹn và đường liên kết đến sản phẩm/dịch vụ tại địa phương vào công cụ định vị, bạn có thể xem chỉ số về các lượt xem và lượt nhấp đó.
Sau đây là yêu cầu mẫu dành cho API Trang doanh nghiệp, trong đó yêu cầu nhiều loại
chỉ số. Để theo dõi số lượt nhấp vào mặt hàng, LOCAL_POST_VIEWS_SEARCH và
Chỉ số LOCAL_POST_ACTIONS_CALL_TO_ACTION là phù hợp nhất.
Hãy 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 về Chỉ đường lái xe đến vị trí.
- 42
LOCAL_POST_ACTIONS_CALL_TO_ACTIONlượt nhấp vào mặt hàng. - 11 lượt xem bài đăng tại địa phương trên Google Tìm kiếm.
Một lựa chọn chỉ số khác bao gồm 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ỗ với Google, bạn có thể ghi nhật ký những hành động đó đến Google Analytics, từ đó cho phép bạn theo dõi lượt chuyển đổi trong Google Analytics. 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ỉ có tác dụng riêng làm so với KPI của bạn. Những con số này cũng giúp bạn hiểu rõ tác động của những chỉ số định vị này cải tiến đố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 Số liệu phân tích trên công cụ định vị của bạn dựa trên các chỉ số của Trang doanh nghiệp. Ví dụ: bằng cách so sánh chỉ số này, bạn có thể biết có bao nhiêu khách hàng đang nhận chỉ đường từ công cụ định vị của bạn và Google Maps để sau đó ghé thăm vị trí thực tế của bạn.
Công cụ định vị nâng cao bổ sung
Tuỳ thuộc vào doanh nghiệp của bạn hoặc quyền truy cập của người dùng của bạn, bạn có thể nâng cao trải nghiệm của người dùng hơn nữa.
Đang gửi chỉ đường đến thiết bị di động
Để giúp người dùng đến một vị trí dễ dàng hơn nữa, 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 nút này, ứng dụng Google Maps sẽ khởi chạy trên điện thoại nếu đã 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 cung cấp cho người dùng tuỳ chọn sử dụng tính năng điều hướng 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 để soạn URL chỉ đường như sau, với
Tên địa điểm được mã hoá URL dưới dạng tham số destination và mã địa điểm dưới dạng
Tham số destination_place_id. Không mất phí soạn hoặc sử dụng
URL của Maps, nên bạn không cần cung cấp khoá API trong URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Bạn có thể tuỳ ý cung cấp tham số truy vấn origin bằng cùng một địa chỉ
làm đích đến. Nhưng nếu bỏ qua phần tử này, các chỉ dẫn sẽ bắt đầu từ
thông tin hướng dẫn hiện tại của người dùng
vị trí của bạn, có thể khác với nơi họ 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 bổ sung, chẳng hạn như travelmode và
dir_action=navigate để xem đường đi khi tính năng đi theo chỉ dẫn đang bật.
Đường liên kết có thể nhấp này (mở rộng URL mẫu ở trên) sẽ đặt origin
làm sân vận động bóng đá London và sử dụng travelmode=transit để cung cấp
đường đi bằng phương tiện công cộng tới điểm đến.
Hiện tại, để gửi văn bản hoặc email chứa URL này, bạn nên sử dụng bên thứ ba 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 gửi email. Để biết thêm thông tin, hãy xem 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 các vị trí
Đối với nhiều vị trí trên thế giới, Chế độ xem đường phố có thể được sử dụng để hiển thị bên ngoài 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 đường phố trong tương tác (web) hoặc tĩnh (API) biểu mẫu, tuỳ vào việc bạn có muốn người dùng "quan sát xung quanh" hay không khu vực ở 360 độ. Chế độ xem phố cũng có sẵn 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 các trường hợp, bạn có thể xác định vị trí của người dùng bằng cách sử dụng các dịch vụ vị trí được tích hợp sẵn thiết bị hoặc trình duyệt của họ. Chúng tôi đưa ra một ví dụ về bằng 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 bản đồ của Google và có tài liệu về việc yêu cầu quyền và lấy thông tin vị trí ở Android và iOS. Tuy nhiên, có thể có những trường hợp mà bạn muốn có phương án thay thế trình tìm vị trí; Ví dụ: nếu dịch vụ vị trí trên thiết bị bị tắt hoặc bạn có lo ngại về việc thông tin vị trí của 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à độ chính xác bán kính dựa trên thông tin về trạm phát sóng và nút Wi-Fi mà khách hàng có thể phát hiện. Bạn có thể sử dụng Vị trí địa lý làm cơ chế dự phòng để xác định thông tin vị trí của người dùng hoặc bạn có thể sử dụng dữ liệu này để kiểm tra chéo vị trí được thiết bị báo cáo.
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
Trong phần Cung cấp thông tin chi tiết về địa điểm trước đó, mà chúng tôi đã đề cập bằng cách sử dụng Chi tiết địa điểm để cung cấp cho người dùng mức độ phong phú thông tin về địa điểm của bạn, chẳng hạn như giờ mở cửa, ảnh và bài đánh giá.
Sẽ rất hữu ích nếu bạn hiểu rõ chi phí của dữ liệu khác nhau các trường trong Thông tin chi tiết về địa điểm. Các dữ liệu này được phân loại là Cơ bản, Thông tin liên hệ và Dữ liệu về bầu không khí. Để quản lý chi phí của bạn, một chiến lược là kết hợp thông tin bạn đã có về vị trí của bạn bằng thông tin mới (thường là Dữ liệu cơ bản và Dữ liệu liên hệ) từ Google Các bản đồ như đóng cửa tạm thời, giờ hoạt động vào ngày lễ, điểm 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 địa điểm của mình, bạn không cần yêu cầu các trường đó từ Chi tiết địa điểm và có thể ràng buộc yêu cầu của bạn chỉ tìm nạp Cơ bản hoặc Trường Dữ liệu khí quyển tùy 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. Chiến lược phát hành đĩa đơn lớp học lập trình cho trình định vị toàn ngăn xếp cung cấp một 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 vị trí của riêng bạn.