Tổng quan
Google Maps Platform có sẵn cho web (JS, TS), Android và iOS, đồng thời cung cấp các API dịch vụ web để lấy thông tin về địa điểm, 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 giúp bạn nhanh chóng tạo một công cụ định vị, bao gồm cả việc nhập trang thông tin trên Trang doanh nghiệp và tự động nhúng đường liên kết đặt lịch hẹn của các nhà cung cấp bên thứ ba. Giao diện người dùng có tính tương tác giúp bạn tạo mã và triển khai lên Cloud chỉ trong vài phút.
Người dùng muốn tìm hiểu về sản phẩm và dịch vụ trên mạng, đồng thời tìm được vị trí phù hợp 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ể, còn bạn muốn mang đến cho họ trải nghiệm trực tuyến phong phú để tăng số lượt ghé thăm vị trí thực tế của bạn, nâng cao mức độ hài lòng của người dùng và giảm số cuộc gọi hỗ trợ. Bạn cũng muốn đo lường mức độ thành công của công cụ định vị để xác định xem khách hàng có thể tìm thấy vị trí của bạn hay không, đồng thời bạn muốn biết những điểm cần cải thiện.
Locator Plus (các mẹo hướng dẫn và tuỳ chỉnh mà chúng tôi cung cấp trong chủ đề này) là tổ hợp tối ưu mà chúng tôi đề xuất về các API của Nền tảng Google Maps để tạo trải nghiệm người dùng tuyệt vời cho công cụ định vị. Khi làm theo những phương pháp này, bạn có thể giúp người dùng tìm thấy vị trí của bạn trên bản đồ, xem thông tin chi tiết mà họ cần để đưa ra quyết định và cung cấp cho họ thông tin chỉ đường, cho dù họ đang lái xe, đi xe đạp, đi bộ hay đi phương tiện công cộng.
Đối với người dùng Locator Plus, trang tổng quan 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 mình, nhờ đó bạn có thể nắm rõ mức độ tương tác của người mua sắm với công cụ định vị cửa hàng. Để truy cập vào báo cáo này, hãy chuyển đến mục Báo cáo về mức độ tương tác của bảng điều khiển. Để biết thêm thông tin chi tiết về báo cáo này, hãy xem Báo cáo về mức độ tương tác.
Sơ đồ sau đây cho thấy các API cốt lõi liên quan đến việc triển khai Locator Plus. Sơ đồ này cũng cho thấy một cơ sở dữ liệu về dữ liệu vị trí của riêng bạn mà bạn có thể kết hợp với Thông tin chi tiết về địa điểm để cung cấp cho người dùng bộ thông tin đầy đủ và tốt nhất có thể. (Nhấp để phóng to.)
Bật API
Để triển khai các phương pháp này, bạn phải bật các API sau trong 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ài viết Bắt đầu sử dụng Google Maps Platform.Các phần triển khai
Sau đây là các phương pháp và hoạt động tuỳ chỉnh mà chúng ta 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 ngôi sao là một lựa chọn tuỳ chỉnh không bắt buộc nhưng nên dùng để cải thiện giải pháp.
| Hiển thị vị trí của bạn trên một bản đồ tương tác |
Tạo một bản đồ cho phép người dùng xem thông tin chi tiết về vị trí, di chuyển xung quanh cũng như phóng to và thu nhỏ. Hoặc khám phá giải pháp Quick Builder Locator Plus để nhanh chóng tạo bản đồ, bao gồm cả việc 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 vào Google Cloud Storage. |
|
| Cung cấp Place Details | Sau khi người dùng tìm thấy các địa điểm gần nhất của bạn trên bản đồ, hãy cung cấp cho họ Place Details có ý nghĩa về địa điểm để giúp họ đưa ra quyết định. | |
| Hiển thị vị trí ở chế độ xem 45° | Giúp người dùng xem vị trí của bạn rõ hơn ở chế độ xem hình ảnh vệ tinh từ góc 45 độ. | |
| Xác định vị trí của người dùng | Thêm chức năng nhập liệu trong khi di chuyển để cải thiện trải nghiệm người dùng trên tất cả các nền tảng và cải thiện độ chính xác của địa chỉ với số lần nhấn phím tối thiểu. | |
| Hiển thị thời gian di chuyển và khoảng cách đến các vị trí gần nhất | Tính toán khoảng cách và thời gian di chuyển cho nhiều điểm xuất phát và điểm đến, bạn có thể chọn chỉ định nhiều phương tiện di chuyển như đi bộ, lái xe hoặc đi xe đạp. | |
| Giúp người dùng đặt cuộc hẹn |
Cho phép người dùng đặt cuộc hẹn trên bảng điều khiển bên của phần Chi tiết về địa điểm. Hoặc khám phá giải pháp Quick Builder Locator Plus để nhanh chóng tạo bản đồ, bao gồm cả việc 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 vào Google Cloud Storage. |
|
| Hiển thị ưu đãi tại địa phương | Hiển thị cho người dùng các ưu đãi tại địa phương có thể nhấp vào trong bảng điều khiển bên của phần Place Details. | |
| Cung cấp chỉ dẫn đường đi | Nhận dữ liệu chỉ đường từ điểm khởi hành đến điểm đến bằng nhiều phương tiện di chuyển, chẳng hạn như đi bộ, lái xe, đạp xe và phương tiện công cộng. | |
| Tuỳ chỉnh bản đồ | Tạo điểm đánh dấu tuỳ chỉnh trên bản đồ để giúp các vị trí của bạn nổi bật và tạo kiểu cho bản đồ sao cho phù hợp với màu sắc thương hiệu. Hiển thị (hoặc ẩn) các địa điểm yêu thích (POI) cụ thể trên bản đồ để giúp người dùng định hướng tốt hơn và kiểm soát mật độ POI để tránh bản đồ bị rối. | |
| Thu thập thông tin chi tiết về mức sử dụng bằng số liệu phân tích | Định cấu hình và sử dụng Google Analytics để thu thập thông tin chi tiết về chiến lược và việc triển khai công cụ định vị của bạn. | |
| Gửi đường đi đến thiết bị di động | Ngoài việc hiển thị đường đi trên công cụ định vị, bạn cũng có thể gửi đường đi đến điện thoại của người dùng để điều hướng bằng Google Maps khi đang di chuyển. | |
| Hiển thị Chế độ xem đường phố để giúp người dùng hình dung vị trí | Cung cấp cho người dùng hình ảnh trong Chế độ xem đường phố với chế độ xem 360 độ để giúp họ định hướng tốt hơn và tìm thấy vị trí của bạn nhanh hơn. | |
| Xác định vị trí của người dùng bằng tính năng Định vị vị trí | Nếu bạn không muốn dựa vào các dịch vụ vị trí trên thiết bị, hãy sử dụng Định vị vị trí để giúp xác định vị trí của người dùng. | |
| Kết hợp dữ liệu vị trí tuỳ chỉnh với Place Details | Kết hợp thông tin vị trí tuỳ chỉnh của riêng bạn với Place Details để cung cấp cho người dùng một bộ dữ liệu phong phú để đưa ra quyết định. |
Hiển 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ể không có cả bản đồ đơn giản, khiến người dùng phải rời khỏi trang web hoặc ứng dụng để tìm một địa điểm gần đó. Điều này có nghĩa là người dùng sẽ có trải nghiệm không tối ưu vì họ phải chuyển đổi giữa các trang để có được thông tin cần thiết. Thay vào đó, bạn có thể cải thiện trải nghiệm này bằng cách nhúng và tuỳ chỉnh bản đồ trong các ứng dụng của mình.
Có nhiều cách để bật tính năng này: (1) sử dụng giải pháp Quick Builder Locator Plus để cung cấp chức năng này ngay lập tức và (2) sử dụng 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ập thông tin doanh nghiệp từ Trang doanh nghiệp. Giờ đây, mọi thay đổi về thông tin doanh nghiệp trên Trang doanh nghiệp của bạn sẽ được phản ánh trong công cụ định vị cửa hàng trên trang web của bạn. Những thay đổi này có thể bao gồm giờ hoạt động, thông tin liên hệ, ảnh, các lựa chọn về dịch vụ và nhiều thông tin khác. Quick Builder có thể giúp bạn nhanh chóng khám phá cách thiết lập vị trí doanh nghiệp trên bản đồ, tạo mã có thể triển khai hoặc triển khai trực tiếp vào Google Cloud Storage chỉ trong vài phút.
Sử dụng chế độ triển khai Dynamic Maps của riêng bạn
| Ví dụ này sử dụng: Maps JavaScript API | Ngoài ra, bạn cũng có thể xem hướng dẫn cho: Android | iOS |
Bạn có thể thêm một bản đồ động vào trang của mình (tức là bản đồ mà người dùng có thể di chuyển xung quanh, phóng to và thu nhỏ, đồng thời xem thông tin chi tiết về các vị trí và địa điểm yêu thích khác nhau) chỉ bằng một vài dòng mã.
Trước tiên, bạn cần thêm Maps JavaScript API vào trang. 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 trong trang HTML của mình.
<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 đến hàm JavaScript initMap chạy khi trang tải. Trong URL, bạn cũng có thể xác định ngôn ngữ hoặc khu vực của bản đồ để đảm bảo bản đồ được định dạng đúng cách cho quốc gia cụ thể mà bạn đang nhắm đến. Việc đặt một khu vực cũng đảm bảo rằng hành vi của các ứng dụng được dùng bên ngoài Hoa Kỳ sẽ thiên về khu vực mà bạn đặt. Xem Thông tin chi tiết về phạm vi cung cấp của Google Maps Platform để biết danh sách đầy đủ các ngôn ngữ và khu vực được hỗ trợ, đồng thời tìm hiểu thêm về cách sử dụng tham số region.
Tiếp theo, bạn cần có một div HTML để đặt bản đồ trên trang.
Đây là nơi bản đồ sẽ xuất hiện.
<div id="map"></div>
Bước tiếp theo là thiết lập chức năng cơ bản cho bản đồ. Việc này được thực hiện trong hàm tập lệnh initMap được chỉ định trong URL tập lệnh. Trong tập lệnh này (như 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 mà người dùng có thể sử dụng trên bản đồ. Lưu ý rằng getElementById() tham chiếu đến mã nhận dạng "map" div ở 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 một công cụ định vị, bạn thường muốn đặt vị trí ban đầu, điểm trung tâm hoặc ranh giới và mức thu phóng (mức độ phóng to bản đồ ở vị trí đó). Hầu hết các phần tử khác (chẳng hạn như điều chỉnh các chế độ kiểm soát) là không bắt buộc khi bạn xác định mức độ tương tác với bản đồ.
Lấy mã địa điểm
| Ví dụ này sử dụng: Places API | Cũng có sẵn: JavaScript |
Bạn có thể có một cơ sở dữ liệu về các vị trí của mình với thông tin cơ bản như tên của vị trí đó, địa chỉ và số điện thoại. Để tìm nạp thông tin mà Google Maps Platform có về địa điểm đó, bao gồm cả toạ độ địa lý và thông tin do người dùng đóng góp, hãy tìm mã địa điểm tương ứng với từng vị trí trong cơ sở dữ liệu của bạn. Bạn có thể gọi đến
điểm cuối Tìm địa điểm trong tính năng Tìm kiếm địa điểm của Places API và chỉ yêu cầu trường place_id. Sau đây là ví dụ về cách yêu cầu mã địa điểm cho 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 và sử dụng mã này như một cách hiệu quả để yêu cầu thông tin về địa điểm. Sau đây là hướng dẫn sử dụng Mã địa điểm để mã hoá địa lý, truy xuất Place Details và yêu cầu chỉ đường đến địa điểm đó.
Mã hoá địa lý cho các vị trí của bạn
| Ví dụ này sử dụng: Geocoding API | Cũng có sẵn: JavaScript |
Nếu cơ sở dữ liệu vị trí của bạn có địa chỉ đường phố nhưng không có toạ độ địa lý, hãy sử dụng Geocoding API để lấy vĩ độ và kinh độ của địa chỉ đó nhằm mục đích đặt điểm đánh dấu trên bản đồ. Bạn có thể mã hoá địa lý các địa chỉ ở phía máy chủ, lưu trữ vĩ độ và kinh độ trong cơ sở dữ liệu của mình và làm mới ít nhất 30 ngày một lần.
Dưới đây là ví dụ về cách sử dụng Geocoding API để lấy vĩ độ và kinh độ của mã địa điểm được trả về cho văn phòng Google ở London:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_aThê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 đồ. Thường thì bạn có thể làm việc này bằng cách thêm điểm đánh dấu vào bản đồ, mặc dù có một số lựa chọn khác mà bạn có thể sử dụng, chẳng hạn như các lớp dữ liệu.
Sau khi bạn có vĩ độ và kinh độ cho vị trí của mình, đây là ví dụ về cách thêm một đ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);
Với một vài điểm đánh dấu, bạn có thể xem vị trí của nhiều địa điểm cùng lúc.
Nếu có nhiều vị trí, bạn có thể cân nhắc sử dụng tiện ích phân cụm điểm đánh dấu cho JavaScript, Android hoặc iOS. Sau đây là ví dụ về tính năng phân cụm điểm đánh dấu trong mẫu JavaScript của công cụ định vị cửa hàng trên GitHub.
Cung cấp thông tin chi tiết về địa điểm
| Ví dụ này sử dụng: Maps JavaScript API | Cũng có sẵn: 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 các địa điểm của bạn. Với thông tin chi tiết phong phú về Địa điểm, chẳng hạn như thông tin liên hệ, giờ hoạt động, đ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 tạm thời, người dùng sẽ biết chính xác những gì họ có thể mong đợi khi ghé thăm địa điểm của bạn. Sau khi gọi Places API, bạn có thể lọc và hiển thị phản hồi trong một cửa sổ thông tin, một thanh bên trên web hoặc theo bất kỳ cách nào khác mà bạn muốn.
Để yêu cầu Place Details, bạn sẽ cần mã địa điểm của từng vị trí. Hãy xem phần Lấy mã địa điểm để truy xuất mã địa điểm của vị trí.
Mở rộng để xem các video yêu cầu Place Details:
Lấy giờ mở cửa
Kiểm tra thông tin đóng cửa
Kiểm soát chi phí
Ví dụ sau đây sử dụng Places Library, Maps JavaScript API để truy xuất Place Details và thêm thông tin đó vào một InfoWindow. Cách triển khai này sử dụng chiến lược tiết kiệm chi phí là chỉ kích hoạt yêu cầu Chi tiết về địa điểm khi người dùng yêu cầu thông tin chi tiết bằng cách nhấp vào điểm đánh dấu thay vì chủ động tìm nạp thông tin chi tiết cho tất cả các vị trí, bất kể người dùng có quan tâm hay không.
const marker = new google.maps.Marker({ 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í ở chế độ xem 45°
| Ví dụ này sử dụng: Maps JavaScript API | Ngoài ra, bạn cũng có thể xem hướng dẫn cho: Android | iOS |
Khi người dùng xem được vị trí của bạn ở chế độ xem từ trên không, họ sẽ hình dung rõ hơn về vị trí đó và dễ dàng tìm thấy vị trí đó hơn. Khi người dùng chọn một vị trí duy nhất để xem thêm thông tin chi tiết, bạn có thể phóng to vị trí đó để hiển thị hình ảnh vệ tinh có sẵn ở góc 45°.
Mã mẫu sau đây đặt bản đồ ở mức thu phóng cao, một loại bản đồ tương thích và góc nghiêng sẽ hiển thị hình ảnh 45° nếu có. Thông tin chi tiết về phạm vi cung cấp hình ảnh 45° được giải thích trong tài liệu.
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}Đặt lại về chế độ xem bản đồ ban đầu
Người dùng thường muốn chuyển đổi qua lại giữa chế độ xem chi tiết của một vị trí và chế độ xem tóm tắt của một số vị trí lân cận. Để tạo điều kiện thuận lợi cho việc này, hãy thêm một trình nghe để phát hiện thời điểm người dùng rời khỏi chế độ xem chi tiết trong các hoạt động tương tác trên bản đồ hoặc trong chế độ xem danh sách. Ví dụ: việc theo dõi sự kiện zoom_changed trên đối tượng map cho biết rằng người dùng đã thu nhỏ chế độ xem chi tiết theo cách thủ công hoặc đã gọi một hàm khác để cập nhật mức thu phóng. Trong mẫu này, thao tác thu nhỏ sẽ đặt lại bản đồ về loại và độ nghiêng bản đồ ban đầu.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Xác định vị trí của người dùng
| Ví dụ này sử dụng: Maps JavaScript API | Ngoài ra, bạn cũng có thể xem hướng dẫn cho: Android | iOS |
Thành phần khoá tiếp theo trong mọi công cụ định vị là xác định vị trí bắt đầu của người dùng. Theo mặc định, bạn có thể sử dụng dịch vụ vị trí trên thiết bị di động và thông tin định vị vị trí trên trình duyệt web để yêu cầu người dùng cấp quyền đặt điểm khởi hành là vị trí hiện tại của người dùng. Tuy nhiên, người dùng có thể từ chối các quyền đó hoặc có thể muốn đặt một vị trí khác làm điểm xuất phát.
Người dùng ngày nay đã quen với chức năng tự động điền khi nhập trên phiên bản Google Maps dành cho người dùng cá nhân. Bạn có thể tích hợp chức năng này vào bất kỳ ứng dụng nào bằng cách sử dụng các thư viện Địa điểm của Google Maps Platform trên thiết bị di động và web. Khi người dùng nhập một địa chỉ, tính năng tự động hoàn thành sẽ điền phần còn lại thông qua việc sử dụng các tiện ích. Bạn cũng có thể cung cấp chức năng tự động hoàn thành của riêng mình bằng cách sử dụng trực tiếp các thư viện Places.
Việc thêm thư viện Place Autocomplete vào trang web của bạn chỉ là vấn đề thêm một vài tham số truy vấn vào URL tập lệnh Maps JavaScript API. Trong ví dụ sau, phần bổ sung là libraries=places.
<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 để người dùng nhập dữ 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 động dịch vụ Tự động hoàn thành và liên kết dịch vụ này với hộp văn bản được đặt tên. Việc giới hạn
Dự đoán Place Autocomplete 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ố, khu dân cư, thành phố và mã bưu chính để người dùng có thể nhập bất kỳ mức độ cụ thể nào để mô tả vị trí xuất phát của họ. Hãy nhớ yêu cầu trường geometry để phản hồi chứa vĩ độ và kinh độ của vị trí xuất phát của người dùng. Bạn sẽ sử dụng các toạ độ bản đồ này để đặt lại tâm bản đồ và cho biết mối quan hệ giữa các vị trí của bạn với vị trí 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 lấy hình học của kết quả trùng khớ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ể xem mối quan hệ giữa người dùng và bất kỳ vị trí cụ thể nào, như minh hoạ trong hình ảnh sau.
Mở rộng phần này để xem video hướng dẫn từng bước về cách thêm tính năng Tự động hoàn thành địa điểm vào ứng dụng:
Trang web
Ứng dụng Android
Ứng dụng iOS
Đang hiển thị thời gian di chuyển và khoảng cách đến các vị trí gần nhất
| Ví dụ này sử dụng: Distance Matrix API (Cũ) | Ngoài ra, bạn có thể sử dụng: Dịch vụ ma trận khoảng cách, API Maps JavaScript (Phiên bản cũ) |
Sau khi biết vị trí của người dùng, bạn có thể so sánh vị trí này với vị trí của bạn. Việc này với Distance Matrix Service, Maps JavaScript API (Phiên bản cũ) sẽ giúp người dùng chọn vị trí thuận tiện nhất cho họ theo thời gian lái xe hoặc khoảng cách đường bộ.
Việc hiển thị vị trí gần người dùng ngụ ý rằng bạn đã điền sẵn vị trí của mình. Khi sử dụng cơ sở dữ liệu vị trí của riêng bạn, điều quan trọng là phải đảm bảo dữ liệu ở định dạng có thể dùng trong bản đồ, chẳng hạn như GeoJSON, được mô tả trong chủ đề Lớp dữ liệu.
Cách tiêu chuẩn để sắp xếp danh sách vị trí là sắp xếp theo khoảng cách. Thông thường, khoảng cách này đượ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 điều này có thể gây hiểu lầm. Đường thẳng có thể đi qua một con sông không thể vượt qua hoặc qua những con đường đông đúc vào thời điểm mà một vị trí khác có thể thuận tiện hơn. Điều này rất quan trọng khi bạn có nhiều vị trí cách nhau vài km.
Distance Matrix Service 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, đồng thời trả về không chỉ khoảng cách di chuyển mà còn cả thời gian di chuyển giữa các vị trí đó. Trong trường hợp của người dùng, điểm khởi hành sẽ là vị trí hiện tại của họ hoặc điểm xuất phát mong muốn, còn điểm đến sẽ là vị trí của các địa điểm. Bạn có thể chỉ định điểm khởi hành và điểm đến dưới dạng các cặp toạ độ hoặc địa chỉ; địa chỉ sẽ được so khớp khi dịch vụ được gọi. Bạn có thể sử dụng Distance Matrix với một số tham số bổ sung để cho thấy kết quả dựa trên thời gian lái xe hiện tại hoặc trong tương lai.
Ví dụ sau đây gọi Dịch vụ ma trận khoảng cách, chỉ định vị trí ban đầu và các vị trí của người dùng. Ví dụ này cho thấy khoảng cách từ tâm bản đồ đến 3 văn phòng của Google ở London.
Thông tin tham khảo nhanh về việc mã hoá URL: %2C = , (dấu phẩy), %3A = : (dấu hai chấm) và %7C = | (dấu gạch dọc).
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_aSau đây là một phiên bản mà 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_aPhả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ư danh sách 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 xuất phát (điểm đánh dấu màu đỏ C) và các điểm đến trên bản đồ:
Khoảng cách đường thẳng và khoảng cách theo tuyến đường thường khác nhau, như minh hoạ trong bảng sau.
| Thông tin vị trí | Khoảng cách đường thẳng | Đường trong giao thông / thời gian |
|---|---|---|
| Vị trí A | 3,32 km | 4,5 km / 15 phút |
| Vị trí B | 3,2 km | 5 km / 17 phút |
| Vị trí C | 4,84 km | 6,9 km / 23 phút |
Mặc dù Vị trí B gần nhất về khoảng cách, nhưng tuyến đường và thời gian di chuyển đến đó lại lâu hơn vì Vị trí A có đường cao tốc.
Sau khi thực hiện yêu cầu này, bạn có thể xử lý kết quả trùng khớp để sắp xếp các phản hồi theo thời lượng lái xe. Bạn có thể tìm thấy ví dụ về hàm như vậy trong lớp học lập trình về công cụ định vị.
Cung cấp hướng dẫn di chuyển
| Ví dụ này sử dụng: Dịch vụ chỉ đường của Maps JavaScript API | Các API khác: Directions API (Phiên bản cũ) dịch vụ web để sử dụng trên Android và iOS, trực tiếp từ ứng dụng hoặc từ xa thông qua một proxy máy chủ |
Việc cho người dùng xem chỉ đường ngay trong trang web hoặc ứng dụng của bạn có nghĩa là họ không cần rời khỏi trang web của bạn. Điều này cũng có nghĩa là người dùng sẽ không bị phân tâm bởi các trang khác hoặc nhìn thấy đối thủ cạnh tranh trên bản đồ. Bạn thậm chí có thể cho biết lượng khí thải carbon của một phương tiện di chuyển cụ thể và cho biết tác động của một hành trình cụ thể.
Directions Service cũng có các chức năng giúp bạn xử lý kết quả và dễ dàng hiển thị kết quả trên bản đồ.
Sau đây là ví dụ về cách hiển thị bảng điều hướng. Để biết thêm thông tin về mẫu này, hãy xem phần Hiển thị chỉ dẫn bằ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ề Maps JavaScript API hoặc xem lớp học lập trình từng bước để tạo một công cụ định vị.
Giúp người dùng đặt lịch hẹn
Khi người dùng xem Trang chi tiết về địa điểm của bạn trong một bảng điều khiển bên, bạn có thể mang đến sự thuận tiện khi đặt lịch hẹn chỉ bằng một cú nhấp chuột, như minh hoạ trong hình sau.
Có nhiều cách để bật tính năng này: (1) sử dụng giải pháp Quick Builder Locator Plus để cung cấp sẵn chức năng này và (2) sử dụng Trang doanh nghiệp của bạn. Phần này mô tả chi tiết các lựa chọn này.
Sử dụng Trình tạo nhanh Locator Plus
Bạn có thể sử dụng giải pháp Quick Builder Locator Plus để 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 đường liên kết đặt lịch hẹn được nhúng (nếu có) cho các địa điểm kinh doanh của mình thông qua tính năng Đặt chỗ bằng Google. Ngay cả khi không có Trang doanh nghiệp được liên kết với Tài khoản Google, bạn vẫn có thể sử dụng Trình tạo nhanh để nhúng đường liên kết đặt phòng cho những doanh nghiệp mà bạn đã bật với các nhà cung cấp dịch vụ đặt phòng bên thứ ba thông qua tính năng Đặt chỗ bằng Google*.
*Tính năng Đặt chỗ bằng Google chỉ hoạt động ở một số quốc gia/khu vực, dành cho những doanh nghiệp hợp tác với một nhà cung cấp dịch vụ đặt lịch được hỗ trợ. Nếu bạn quan tâm đến tính năng Đặt chỗ bằng Google nhưng hiện không hợp tác với đối tác của tính năng Đặt chỗ bằng Google, hãy 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 bày tỏ sự quan tâm này và tham khảo tài liệu của chúng tôi để biết cách họ có thể bắt đầu. Nếu chưa hợp tác với một nhà cung cấp dịch vụ đặt chỗ, bạn có thể xem các nhà cung cấp đủ điều kiện trong phần Đặt chỗ trong Trình quản lý Trang doanh nghiệp.
Sử dụng Trang doanh nghiệp để bật tính năng đặt lịch hẹn
Khi bạn quản lý sự hiện diện trực tuyến bằng Trang doanh nghiệp, các vị trí doanh nghiệp mà bạn tạo sẽ được liên kết với mã địa điểm của Google Maps Platform để cho phép chức năng lập bản đồ tích hợp với dữ liệu doanh nghiệp.
Business Profile API cho phép bạn tạo các hành động (chẳng hạn như đặt lịch hẹn) mà bạn có thể truy xuất và hiển thị trong ứng dụng của mình. Tuy nhiên, bạn cần thực hiện một số bước theo cách thủ công để bật tính năng này, như mô tả bên dưới.
Khi người dùng xem Thông tin 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 một đường liên kết để họ đặt lịch hẹn. Phần này mô tả cách thực hiện.
-
Tạo một
placeActionLinkBusiness Profile API cho vị trí thuộc loạiAPPOINTMENT,ONLINE_APPOINTMENThoặcDINING_RESERVATION.placeActionLinksẽ là đối tượng bạn dùng cho đường liên kết đặt cuộc hẹn trong bảng điều khiển bên. (Nếu bạn đã tạo đường liên kết đến hành động đặt cuộc hẹn mà bạn muốn, hãy chuyển sang bước tiếp theo.) Sau đây là ví dụ về phản hồi của một thao tác POSTplaceActionLinks.createthành công:{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } -
Tìm vị trí trên Trang doanh nghiệp được liên kết với mã địa điểm trên Google Maps Platform.
Khi người dùng xem 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 của Nền tảng Google Maps. Mã địa điểm được liên kết với mã vị trí của Trang doanh nghiệp, vì vậy, bạn cần tìm mã vị trí dựa trên mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đặt cuộc hẹn mà bạn đã tạo. Hãy 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ả các vị trí trong một tài khoản.
- Trong vị trí tài khoản,
LocationKeychứa mã địa điểm của Google Maps Platform. Bạn có thể so sánh mã này với mã địa điểm của vị trí đang được xem.
-
Với mã vị trí, bạn có thể nhận được đường liên kết hành động mà bạn muốn. Để truy xuất một cuộc hẹn hiện có
placeActionLink, hãy liệt kêplaceActionLinkshiện có cho vị trí và lọc theoplaceActionTypeđể tìm đường liên kết đặt lịch hẹn mà bạn muốn sử dụng (APPOINTMENT,ONLINE_APPOINTMENThoặcDINING_RESERVATION).Ví dụ sau đây cho thấy một APPOINTMENT
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 sẵn một
<div>trong bảng điều khiển bên bằng dữ liệu liên quan từ đối tượngplaceActionLink, đặc biệt là URI cho đường liên kết đặt phòng.
Các lựa chọn thay thế khác để thêm đường liên kết đặt cuộc hẹn
Nếu bạn không quản lý một Hồ sơ doanh nghiệp hoặc không muốn sử dụng giải pháp Quick Builder Locator Plus, hãy xem tài liệu trên nền tảng đặt lịch hẹn của bạn để biết cách nhúng một tiện ích đặt lịch hẹn vào trang web hoặc ứng dụng. Một lựa chọn khác là sử dụng Google Cloud, chẳng hạn như Cloud Spanner để quản lý khoảng không quảng cáo (video).
Hiển thị ưu đãi tại địa phương
Trong bảng điều khiển bên của phần Chi tiết về địa điểm 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. Google Doanh nghiệp của tôi API cho phép bạn tạo và truy xuất "bài đăng" (chẳng hạn như ưu đãi tại địa phương) được liên kết với vị trí của bạn. Hình sau đây cho thấy ví dụ về ưu đãi tại địa phương trong bảng điều khiển bên của phần Chi tiết về địa điểm.
(Sơ đồ kiến trúc trong phần Trình tạo nhanh cho thấy các công nghệ hiện có để thêm ưu đãi vào công cụ định vị của bạn.)
Vì ưu đãi tại địa phương được liên kết với các vị trí, nên bạn cần tìm mã vị trí của Trang doanh nghiệp được liên kết với mã địa điểm của Google Maps Platform cho vị trí mà người dùng đang xem.
Khi có mã vị trí của Trang doanh nghiệp, bạn có thể truy xuất ưu đãi có liên quan dưới dạng localPost để hiển thị trong bảng điều khiển bên của phần Place Details. Sau đây là các bước:
- Với API Google Doanh nghiệp của tôi, bạn có thể tạo mọi bài đăng ưu đãi mà bạn muốn hiển thị, thuộc loại
OFFER. -
Tìm vị trí / mã vị trí của Trang doanh nghiệp được liên kết với mã địa điểm trên bản đồ.
Khi người dùng xem 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 của Nền tảng Google Maps. Mã địa điểm được liên kết với mã vị trí của Trang doanh nghiệp, vì vậy, bạn cần tìm mã vị trí dựa trên mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đến ưu đãi tại địa phương cho vị trí của bạn. Hãy thực hiện các lệnh gọi API Trang doanh nghiệp sau:
- Liệt kê các tài khoản của dự án.
- Liệt kê tất cả các vị trí trong một tài khoản.
- Trong vị trí tài khoản,
LocationKeychứa mã địa điểm trên Maps 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 ví dụ về yêu cầu đối với thông tin chi tiết của một vị trí trong Business Profile API:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
Phản hồi chứa một trường
locationKeylà Mã địa điểm mà bạn có thể sử dụng với các yêu cầu của Google Maps Platform.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, bạn có thể nhận được ưu đãi mà mình muốn nhờ có mã vị trí. Để truy xuất một bài đăng ưu đãi hiện có, hãy liệt kê
localPostshiện có cho vị trí và lọctopicTypecủaOFFERđể tìm nội dung ưu đãi mà bạn muốn sử dụng.Sau đây là ví dụ về yêu cầu liệt kê các bài đăng tại địa phương đang hoạt động cho một vị trí:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Ví dụ sau đây cho thấy một
OFFERlocalPosttrong phản hồi.Mở rộng để xem 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 liên quan vào
<div>trong bảng điều khiển bên từ đối tượnglocalPost.
Tuỳ chỉnh bản đồ
Bạn có thể thay đổi giao diện và thông tin chi tiết của bản đồ theo nhiều cách. Ví dụ như bạn có thể:
- Tạo điểm đánh dấu tuỳ chỉnh của riêng bạn để thay thế các ghim mặc định trên bản đồ.
- Thay đổi màu sắc của các đối tượng trên bản đồ để thể hiện thương hiệu của bạn.
- Kiểm soát những địa điểm yêu thích mà bạn hiển thị (điểm tham quan, đồ ăn, chỗ ở, v.v.) và mật độ hiển thị, cho phép bạn tập trung sự chú ý của người dùng vào vị trí của bạn trong khi làm nổi bật những địa danh giúp người dùng đến được vị trí gần nhất.
Tạo điểm đánh dấu bản đồ tuỳ chỉnh
Bạn có thể tuỳ chỉnh các điểm đánh dấu 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 tuỳ chỉnh, chẳng hạn như biểu trưng thương hiệu của bạn. Cửa sổ thông tin (hay 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 là raster, vector, có thể kéo và thậm chí là ảnh động.
Sau đây là một bản đồ mẫu sử dụng điểm đánh dấu tuỳ chỉnh. (Xem mã nguồn trong chủ đề Các điểm đánh dấu tuỳ chỉnh của Maps JavaScript API.)
Để biết thông tin chi tiết, hãy xem tài liệu về điểm đánh dấu cho JavaScript (web), Android và iOS.
Tạo kiểu cho bản đồ
Google Maps Platform cho phép bạn tạo kiểu cho bản đồ theo cách giúp người dùng tìm thấy vị trí gần nhất, đến đó nhanh nhất có thể và giúp bạn củng cố thương hiệu của mình. Ví dụ: bạn có thể thay đổi màu sắc của bản đồ cho phù hợp với thương hiệu của mình và có thể giảm sự xao lãng trên bản đồ bằng cách kiểm soát những địa điểm yêu thích mà người dùng nhìn thấy. Google Maps Platform cũng cung cấp một số mẫu bản đồ cơ bản, một số mẫu được tối ưu hoá cho nhiều ngành, chẳng hạn như du lịch, hậu cần, bất động sản và bán lẻ.
Bạn có thể tạo hoặc sửa đổi kiểu bản đồ trong bảng điều khiển Cloud của Google, trên trang Kiểu bản đồ trong dự án của bạn.
Mở rộng để xem ảnh động về cách tạo và tạo kiểu cho bản đồ trong bảng điều khiển Cloud:
Kiểu bản đồ theo ngành
Ảnh động này cho thấy các kiểu bản đồ dành riêng cho ngành mà bạn có thể sử dụng. Những kiểu này là điểm xuất phát tối ưu cho từng loại ngành. Ví dụ: kiểu bản đồ Bán lẻ sẽ giảm số lượng địa điểm yêu thích trên bản đồ, 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 vị trí gần nhất một cách nhanh chóng và tự tin nhất có thể.
Chế độ kiểm soát địa điểm yêu thích
Ảnh động này đặt màu điểm đánh dấu cho các địa điểm yêu thích và tăng mật độ POI trên kiểu bản đồ. Mật độ càng cao thì càng có nhiều điểm đánh dấu địa điểm yêu thích xuất hiện trên bản đồ.
Mỗi kiểu bản đồ đều có mã riêng. Sau khi xuất bản một kiểu trong bảng điều khiển Cloud, bạn sẽ tham chiếu mã bản đồ đó trong mã của mình. Điều này có nghĩa là bạn có thể cập nhật kiểu bản đồ theo thời gian thực mà không cần tái cấu trúc ứng dụng. Giao diện mới sẽ tự động xuất hiện trong ứng dụng hiện có và được dùng trên nhiều nền tảng. Các ví dụ sau đây cho thấy cách thêm mã bản đồ vào một trang web bằng Maps JavaScript API.
Bằng cách thêm một hoặc nhiều map_ids vào URL tập lệnh, Maps JavaScript API sẽ tự động cung cấp các kiểu đó để hiển thị bản đồ nhanh hơn khi bạn gọi các kiểu đó trong mã của mình.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a">
</script>
Đoạn mã sau đây hiển thị một bản đồ có kiểu trên trang web. (Không hiển thị là một phần tử HTML <div id="map"></div> nơi bản đồ sẽ xuất hiện trên trang.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Tìm hiểu thêm về cách kết hợp định kiểu bản đồ dựa trên đám mây trong JavaScript (web), Android và iOS.
Thu thập thông tin chi tiết về mức sử dụng bằng số liệu phân tích
Khi sử dụng số liệu phân tích, bạn có thể thu thập thông tin chi tiết có giá trị về cách người dùng tương tác với công cụ định vị của bạn. Phần này cung cấp hướng dẫn về cách định cấu hình và giám sát Google Analytics và số liệu phân tích của Trang doanh nghiệp để theo dõi dữ liệu mà bạn quan tâm nhất. Đối với người dùng công cụ định vị Quick Builder 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, cho bạn biết mức độ tương tác của khách truy cập trang web với công cụ định vị cửa hàng dựa trên dữ liệu ẩn danh.
Để truy cập vào báo cáo này, hãy chuyển đến phần báo cáo mức độ tương tác của bảng điều khiển Cloud. Để 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.
Với 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ề cách thiết lập và thông tin về việc sử dụng. Thay vào đó, chúng tôi sẽ hướng bạn đến tài liệu chính để đọc thêm và hướng dẫn trong khi làm nổi bật những điểm cần cân nhắc chính về số liệu phân tích cho ứng dụng công cụ định vị của bạn.
Thiết lập Google Analytics
Nếu đang sử dụng Google Analytics với ứng dụng của mình, bạn có thể bỏ qua phần này.
Sau đây là ví dụ về "Thẻ toàn cầu" mà bạn sẽ dán trên trang web của mình để bật Google Analytics.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
Cho dù bạn đang sử dụng Trình quản lý thẻ của Google hay thêm Google Analytics trực tiếp vào trang web của mình, thì điều quan trọng là bạn phải hiểu cách sử dụng chế độ triển khai Google Analytics để làm những việc sau:
- Kích hoạt các hoạt động tương tác của người dùng (chẳng hạn như lượt nhấp) có thể đo lường độc lập với lượt xem trang web (sự kiện).
- Xem dữ liệu thô (chỉ số) trong các nhóm có ý nghĩa (phương diện hoặc phương diện tuỳ chỉnh).
Sử dụng sự kiện tuỳ chỉnh
Sau đây là ví dụ về cách xác định một sự kiện tuỳ chỉnh trong công cụ định vị:
gtag('event', 'location', { 'method': 'address' });
Bạn cần đặt tên cho event và method một cách rõ ràng để có thể hiểu được các sự kiện trong báo cáo. Kích hoạt các sự kiện này cho những lượt tương tác cụ thể mà bạn muốn đo lường, chẳng hạn như khi người dùng chọn một địa chỉ trong danh sách thả xuống Tự động hoàn thành (như trong hình sau).
Bạn có thể gửi lệnh gọi theo dõi sau đây đến Google Analytics bằng sự kiện và phương thức mà bạn đã xác định. (Chúng tôi sẽ trình bày từng tham số truy vấn trên một dòng riêng để bạn dễ đọc.)
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
Hình sau đây cho thấy lệnh gọi Google Analytics đó xuất hiện như thế nào trong chế độ xem Inspect (Kiểm tra) của trình duyệt, trên thẻ Network (Mạng). (Nhấp để phóng to).
Bạn có thể xác minh rằng thẻ sự kiện tuỳ chỉnh của mình đang được ghi lại đúng cách bằng cách xem chế độ xem "Theo thời gian thực" trong Google Analytics. Ví dụ: sự kiện "location" được thiết lập trước đó cho tính năng Place Autocomplete sẽ xuất hiện trong Google Analytics như minh hoạ trong các hình sau.
Ngoài ra, bạn có thể theo dõi các sự kiện theo thời gian thực bằng DebugView, như minh hoạ trong hình sau. Xin lưu ý rằng bạn phải đợi 24 giờ 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 > Sự kiện của Google Analytics.
Bạn cũng có thể phát triển và đo lường các chiến lược để tăng số lượt ghé thăm cửa hàng thực tế từ ứng dụng định vị. Ví dụ: Google Analytics có một dịch vụ Lượt ghé thăm cửa hàng thực tế trong Analytics, liên kết phân tích lượt ghé thăm cửa hàng thực tế (do Google Ads đo lường) với số liệu phân tích của ứng dụng định vị. Bạn cũng có thể phát triển các chiến lược từ ứng dụng đến vị trí của riêng mình, chẳng hạn như ưu đãi trực tuyến có thể đổi tại các vị trí thực tế của bạn.
Các chỉ số trên Trang doanh nghiệp
Ngoài việc theo dõi các sự kiện, chỉ số và phương diện mà bạn quan tâm bằng Google Analytics, Trang doanh nghiệp cũng có các chỉ số riêng. Ví dụ: nếu thêm đường liên kết đặt cuộc hẹn và ưu đãi tại địa phương vào công cụ định vị, bạn có thể nhận được các chỉ số về số lượt xem và lượt nhấp vào những đường liên kết đó.
Yêu cầu mẫu sau đây đối với Business Profile API yêu cầu nhiều loại chỉ số. Để theo dõi lượt nhấp vào ưu đãi, chỉ số LOCAL_POST_VIEWS_SEARCH và LOCAL_POST_ACTIONS_CALL_TO_ACTION sẽ phù hợp nhất.
Mở rộng để xem yêu cầu mẫu.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
"locationNames": [
"accounts/111098884960528804666/locations/15899957830169237700"
],
"basicRequest": {
"metricRequests": [
{
"metric": "QUERIES_DIRECT"
},
{
"metric": "QUERIES_INDIRECT"
},
{
"metric": "VIEWS_MAPS"
},
{
"metric": "VIEWS_SEARCH"
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS"
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH"
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
}
],
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
}
}Mở rộng để xem 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"
}
}
]
}
]
}
Phản hồi chứa các chỉ số, đáng chú ý nhất là:
- 1.571 lượt xem vị trí này trên Google Maps
- 631 lượt xem vị trí trên Google Tìm kiếm.
- 3 yêu cầu chỉ đường lái xe đến vị trí đó.
- 42 lượt nhấp vào mặt hàng
LOCAL_POST_ACTIONS_CALL_TO_ACTION. - 11 lượt xem Bài đăng địa phương trên Google Tìm kiếm.
Một lựa chọn khác về chỉ số là sử dụng tính năng Đặt chỗ bằng Google để tạo đường liên kết đến hành động. Khi người dùng nhấp vào 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. Nhờ đó, bạn có thể theo dõi lượt chuyển đổi trong Google Analytics. Hãy xem tài liệu về tính năng theo dõi lượt chuyển đổi để biết thêm thông tin.
Bất kể bạn sử dụng chiến lược chỉ số nào, việc đo lường không chỉ là xem hiệu suất của bạn so với các KPI. Những số liệu này cũng giúp bạn hiểu được tác động của những điểm cải tiến công cụ định vị này đối với doanh nghiệp của bạn. Ngoài ra, bạn có thể so sánh các chỉ số từ Google Analytics trên công cụ định vị với các chỉ số trên 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 số lượng khách hàng nhận được chỉ đường từ công cụ định vị và Google Maps để sau đó ghé thăm địa điểm thực tế của bạn.
Cải tiến Locator Plus
Tuỳ thuộc vào nhu cầu của doanh nghiệp hoặc người dùng, bạn có thể nâng cao hơn nữa trải nghiệm của người dùng.
Gửi đường đi đến thiết bị di động
Để giúp người dùng dễ dàng đến một địa điểm, bạn có thể nhắn tin hoặc gửi email cho họ một đường liên kết chỉ đường. Khi họ nhấp vào đường liên kết đó, ứng dụng Google Maps sẽ khởi chạy trên điện thoại của họ (nếu đã cài đặt) hoặc maps.google.com sẽ tải trong trình duyệt web trên thiết bị của họ. Cả hai trải nghiệm này đều cung cấp cho người dùng lựa chọn sử dụng đường đi từng chặng (bao gồm cả hướng dẫn bằng giọng nói) để đến đích.
Sử dụng
URL của Maps để tạo một URL chỉ đường như sau, với tên địa điểm được mã hoá URL làm tham số destination và mã địa điểm làm tham số destination_place_id. Bạn không phải trả phí để tạo hoặc sử dụng URL trên Maps, vì vậy, bạn không cần thêm khoá API vào URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
Bạn có thể cung cấp tham số truy vấn origin (không bắt buộc) bằng cách sử dụng cùng một định dạng địa chỉ như đích đến. Nhưng nếu bỏ qua tham số này, đường đi sẽ bắt đầu từ vị trí hiện tại của người dùng, có thể khác với vị trí mà họ đang sử dụng ứng dụng Locator Plus của bạn. URL của Maps cung cấp các lựa chọn tham số truy vấn bổ sung, chẳng hạn như travelmode và dir_action=navigate để khởi chạy đường đi khi bật chế độ chỉ đường.
Đường liên kết có thể nhấp này, mở rộng URL ví dụ ở trên, đặt origin làm sân vận động bóng đá ở London và sử dụng travelmode=transit để cung cấp đường đi bằng phương tiện công cộng đến đích đến.
Để gửi văn bản hoặc email có chứa URL này, bạn nên 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 thông báo bằng dịch vụ bên thứ ba.
Hiển thị Chế độ xem đường phố để giúp người dùng hình dung vị trí
Đối với nhiều địa điểm trên thế giới, bạn có thể sử dụng Chế độ xem đường phố để hiển thị bên ngoài một địa điểm, giúp người dùng xem hình ảnh của địa điểm đó trước khi đến. Bạn có thể cung cấp Chế độ xem đường phố ở dạng tương tác (web) hoặc tĩnh (API), tuỳ thuộc vào việc bạn muốn người dùng "nhìn xung quanh" khu vực ở chế độ 360 độ hay không. Chế độ xem phố cũng có trên Android và iOS.
Xác định vị trí của người dùng bằng tính năng Định vị vị trí
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ách sử dụng dịch vụ vị trí được tích hợp vào thiết bị hoặc trình duyệt của họ. Chúng tôi cung cấp một ví dụ về việc sử dụng tính năng Định vị địa lý HTML5 của trình duyệt để hiển thị vị trí địa lý của người dùng hoặc thiết bị trên Google Maps, đồng thời có tài liệu về việc yêu cầu quyền và lấy vị trí trong Android và iOS. Tuy nhiên, có thể có những trường hợp bạn muốn dùng một công cụ tìm vị trí thay thế; ví dụ: nếu dịch vụ vị trí trên thiết bị bị tắt hoặc bạn lo ngại vị trí trên thiết bị bị giả mạo.
Geolocation API là một API phía máy chủ trả về vị trí và bán kính độ chính xác dựa trên thông tin về các trạm phát sóng và nút Wi-Fi mà ứng dụng có thể phát hiện. Bạn có thể sử dụng Dịch vụ vị trí địa lý làm cơ chế dự phòng để xác định vị trí của người dùng hoặc bạn có thể sử dụng dịch vụ này để kiểm tra chéo vị trí do thiết bị báo cáo.
Kết hợp dữ liệu vị trí tuỳ chỉnh với Place Details
Trong phần Cung cấp thông tin chi tiết về địa điểm trước đó, chúng ta đã đề cập đến việc sử dụng Place Details để cung cấp cho người dùng nhiều thông tin về các vị trí của bạn, chẳng hạn như giờ mở cửa, ảnh và bài đánh giá.
Bạn nên tìm hiểu chi phí của các trường dữ liệu trong phần Chi tiết về địa điểm. Các trường này được phân loại là Dữ liệu cơ bản, Dữ liệu liên hệ và Dữ liệu về không gian. Để 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, chẳng hạn như thông tin về việc đóng cửa tạm thời, giờ hoạt động vào các ngày lễ, cũng như điểm xếp hạng, ảnh và bài đánh giá của người dùng. Nếu đã có thông tin liên hệ cho các địa điểm, bạn sẽ không cần yêu cầu các trường đó từ Place Details và có thể giới hạn yêu cầu chỉ tìm nạp các trường Dữ liệu cơ bản hoặc Dữ liệu về không gian, tuỳ 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 riêng để bổ sung hoặc sử dụng thay cho Place Details. Lớp học lập trình cho công cụ định vị toàn ngăn xếp cung cấp ví dụ về cách sử dụng GeoJSON với cơ sở dữ liệu để lưu trữ và truy xuất thông tin chi tiết về vị trí của riêng bạn.