Hướng dẫn triển khai Locator Plus

Tổng quan

web iOS API

Nền tảng Google Maps có sẵn cho web (JS, TS), Android và iOS, đồng thời cung cấp các API dịch vụ web để lấy thông tin về địa điểm, đường đi và khoảng cách. Các mẫu trong hướng dẫn này được viết cho một nền tảng, nhưng các đường liên kết đến tài liệu được cung cấp để triển khai trên các nền tảng khác.

Tạo ngay!

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 tương tác cho phé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 địa điểm 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ọ sẽ muốn đến địa điểm của bạn nhanh nhất có thể và bạn sẽ muốn mang đến cho họ trải nghiệm trực tuyến phong phú để tăng số lượt ghé thăm địa điểm 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 yêu cầu hỗ trợ. Bạn cũng nên đo lường mức độ thành công của công cụ định vị để xác định xem khách hàng có thể tìm thấy vị trí của bạn hay không, đồng thời tìm hiểu 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 tài liệu này) là sự kết hợp tối ưu giữa các API của Google Maps Platform mà chúng tôi đề xuất để xây dựng trải nghiệm tuyệt vời cho người dùng 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 mà họ cần để đưa ra quyết định và chỉ đường cho họ, cho dù họ đang lái xe, đạp xe, đi bộ hay đi phương tiện công cộng.

Đối với người dùng Locator Plus, trang tổng quan số liệu phân tích giúp bạn phân tích và tạo thông tin chi tiết do AI tạo từ dữ liệu của mình, giúp bạn nắm rõ mức độ gắn bó của người mua sắm với công cụ định vị cửa hàng. Để xem báo cáo này, hãy chuyển đến phần Báo cáo về mức độ tương tác trong bảng điều khiển. Để biết thêm thông tin chi tiết về báo cáo này, hãy xem bài viết Báo cáo về mức độ tương tác.

Sơ đồ sau đây cho thấy các API chính liên quan đến việc triển khai Locator Plus. Sơ đồ này cũng cho thấy 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 Chi tiết địa điểm để cung cấp cho người dùng bộ thông tin đầy đủ và chính xác nhất có thể. (Nhấp để phóng to.)

Phía bên trái của biểu đồ, một trình duyệt web hiển thị bản đồ có cửa sổ bật lên Chi tiết địa điểm.
              Bên phải biểu đồ là danh sách các API cung cấp nhiều chức năng:
              Maps JavaScript API để trực quan hoá vị trí và nội dung, tạo kiểu bản đồ,
              điểm đánh dấu nâng cao, Chế độ xem đường phố tuỳ chỉnh và hiển thị tuyến đường. Place Autocomplete để
              hoàn thành địa chỉ và chức năng nhập trước. Places API (Mới) và Geocoding API cho
              vị trí địa chỉ. Routes API để xếp hạng các vị trí theo khoảng cách, thời gian và
              phương thức di chuyển, đồng thời cho thấy tuyến đường dựa trên thời gian di chuyển và phương thức di chuyển.
              Ở giữa sơ đồ, biểu tượng kho dữ liệu đại diện cho dữ liệu vị trí tuỳ chỉnh trỏ lên biểu tượng máy chủ web bằng mũi tên hai đầu cho biết hoạt động đọc và ghi dữ liệu giữa máy chủ web và kho dữ liệu. Mũi tên giữa trình duyệt web và API đi qua máy chủ web dưới dạng trung gian.

Đang bật API

Để triển khai các phương pháp này, bạn phải bật các API sau trong Google Cloud Console: Để biết thêm thông tin về cách thiết lập, hãy xem bài viết Bắt đầu sử dụng Google Maps Platform.

Các phần triển khai

Sau đây là các phương pháp và tuỳ chỉnh mà chúng ta sẽ đề cập trong tài liệu này.

  • Biểu tượng dấu kiểm là một bài tập cốt lõi.
  • Biểu tượng dấu sao là một 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 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 Trình tạo nhanh Locator Plus để nhanh chóng tạo bản đồ, bao gồm cả việc nhập thông tin doanh nghiệp từ trang thông tin trên Trang doanh nghiệp, nhúng đường liên kết đặt lịch hẹn và triển khai lên 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í từ góc nhìn 45° Giúp người dùng có hình ảnh rõ ràng 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 nhập đến đâu tìm đến đó để cải thiện trải nghiệm người dùng trên mọi nền tảng và cải thiện độ chính xác của địa chỉ với số lần nhấn phím tối thiểu.
Đang hiển thị thời gian di chuyển và khoảng cách đến các địa điểm gần nhất Tính quãng đường và thời gian di chuyển cho nhiều điểm xuất phát và điểm đến, tuỳ ý chỉ định nhiều phương tiện di chuyển như đi bộ, lái xe, hoặc đạp xe.
Giúp người dùng đặt lịch hẹn

Cho phép người dùng đặt lịch hẹn trong bảng điều khiển bên Chi tiết địa điểm.

Hoặc khám phá giải pháp Trình tạo nhanh Locator Plus để nhanh chóng tạo bản đồ, bao gồm cả việc nhập thông tin doanh nghiệp từ trang thông tin trên Trang doanh nghiệp, nhúng đường liên kết đặt lịch hẹn và triển khai lên Google Cloud Storage.

Đăng ưu đãi tại địa phương Cho người dùng thấy các ưu đãi tại địa phương có thể nhấp vào trong bảng điều khiển bên Chi tiết địa điểm.
Cung cấp thông tin đi theo chỉ dẫn Lấy dữ liệu đường đi từ điểm xuất phát đến điểm đến bằng nhiều phương tiện giao thông như đi bộ, lái xe, đi xe đạp và phương tiện công cộng.
Tuỳ chỉnh bản đồ Tạo điểm đánh dấu bản đồ tuỳ chỉnh để giúp các 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 thương hiệu của bạn. Hiển thị (hoặc ẩn) các địa điểm yêu thích (POI) cụ thể trên bản đồ để giúp người dùng định hướng tốt hơn và kiểm soát mật độ POI để tránh làm bản đồ trở nên lộn xộn.
Nhận thông tin chi tiết về mức sử dụng bằng số liệu phân tích Định cấu hình và sử dụng Google Analytics để nắm bắt thông tin chi tiết về chiến lược và cách triển khai công cụ định vị.
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 để họ xem đường đi 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 dịch vụ vị trí trong thiết bị, hãy sử dụng tính năng Định vị địa lý để 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 chi tiết về 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 tập hợ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

Trình đị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 cả bản đồ, khiến người dùng phải rời khỏi trang web hoặc ứng dụng để tìm một địa điểm lân cận. Điều này có nghĩa là người dùng sẽ có trải nghiệm không tối ưu khi phải di chuyển giữa các trang để có được thông tin họ cần. Thay vào đó, bạn có thể nâng cao trải nghiệm này bằng cách nhúng và tuỳ chỉnh bản đồ vào ứng dụng của mình.

Bạn có thể bật chức năng này theo hai cách: sử dụng giải pháp Trình tạo nhanh Locator Plus để cung cấp chức năng này ngay lập tức hoặc sử dụng cách triển khai Dynamic Maps 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 Trình tạo nhanh Locator Plus

Bạn có thể sử dụng giải pháp Trình tạo nhanh Locator Plus để nhập thông tin doanh nghiệp từ Trang doanh nghiệp của bạn. Giờ đây, mọi thay đổi về thông tin doanh nghiệp trên Trang doanh nghiệp sẽ được thể hiện trong công cụ định vị cửa hàng trên trang web của bạn. Những thay đổi này có thể bao gồm giờ hoạt động, thông tin liên hệ, ảnh, lựa chọn dịch vụ và nhiều thông tin khác. Trình tạo nhanh 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 lên Google Cloud Storage chỉ trong vài phút.

Nhập thông tin chi tiết về địa điểm của doanh nghiệp từ Trang doanh nghiệp vào Trình tạo nhanh
Quản lý các địa điểm của bạn trong Locator Plus bằng cách nhập thông tin chi tiết về doanh nghiệp từ Trang doanh nghiệp của bạn

Triển khai ứng dụng Locator Plus trực tiếp lên Google Cloud Storage
Triển khai giải pháp Locator Plus bằng Google Cloud

Sử dụng cách triển khai Bản đồ động của riêng bạn

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

Bạn có thể thêm bản đồ động vào trang của mình (tức là bản đồ mà người dùng có thể di chuyển, phóng to và thu nhỏ, đồng thời xem thông tin chi tiết về các vị trí và địa điểm yêu thích) chỉ bằng vài dòng mã.

Trước tiên, bạn cần đưa 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, bao gồm cả libraries=marker để có thể thêm điểm đánh dấu nâng cao vào bản đồ.

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>

URL 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 theo đúng cách cho quốc gia cụ thể mà bạn đang nhắm đến. Việc đặ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ẽ hiển thị.

<div id="map"></div>

Bước tiếp theo là thiết lập chức năng cơ bản của bản đồ. Việc này được thực hiện trong hàm tập lệnh initMap được chỉ định trong URL tập lệnh. Trong tập lệnh này (như trong ví dụ sau), bạn có thể đặt vị trí ban đầu, mã bản đồ (bắt buộc đối với điểm đánh dấu nâng cao và định kiểu bản đồ dựa trên đám mây), loại bản đồ và các chế độ điều khiển 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 "bản đồ" div trong ví dụ trước.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: 51.485925, lng: -0.129500 },
    mapId: "DEMO_MAP_ID",
    zoomControl: false
  });
}

Đối với công cụ định vị, bạn thường quan tâm đến việc đặt vị trí ban đầu, điểm trung tâm hoặc ranh giới và mức thu phóng (mức độ thu phóng của bản đồ vào vị trí đó). Hầu hết các phần tử khác, chẳng hạn như điều chỉnh các thành phần điều khiển, là không bắt buộc khi bạn xác định mức độ tương tác với bản đồ.

Lấy mã địa điểm

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

Bạn có thể sẽ có một cơ sở dữ liệu về các vị trí của mình cùng với thông tin cơ bản như tên, địa chỉ và số điện thoại của vị trí đó. Để tìm nạp thông tin của Nền tảng Google Maps 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 kiếm văn bản (Mới) trong Places API (Mới) và chỉ yêu cầu trường places.id trong mặt nạ trường để kích hoạt SKU Chỉ mã nhận dạng cơ bản của tính năng Tìm kiếm văn bản. Sau đây là ví dụ về cách yêu cầu mã địa điểm cho văn phòng của Google tại London:

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

Bạn có thể lưu trữ mã địa điểm này trong cơ sở dữ liệu của mình và sử dụng mã này làm 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 Chi tiết địa điểm và yêu cầu chỉ đường đến địa điểm đó.

Đang mã hoá địa lý 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ề vị trí của bạn có địa chỉ đường phố nhưng không có toạ độ địa lý, hãy sử dụng Geocoding API để lấy vĩ độ và kinh độ của địa chỉ đó nhằm mục đích đặt điểm đánh dấu trên bản đồ. Bạn có thể mã hoá địa lý địa chỉ của mình ở phía máy chủ, lưu trữ vĩ độ và kinh độ trong cơ sở dữ liệu, đồng thời làm mới ít nhất 30 ngày một lần.

Dưới đây là ví dụ về cách sử dụng Geocoding API để lấy vĩ độ và kinh độ của mã địa điểm được trả về cho văn phòng Google tại London:

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

Thêm vị trí vào bản đồ

Bước tiếp theo là thêm 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 nâng cao vào bản đồ, mặc dù bạn có thể sử dụng một số lựa chọn khác như lớp dữ liệu.

Sau khi bạn có vĩ độ và kinh độ cho vị trí của mình, dưới đây là ví dụ về cách thêm một điểm đánh dấu nâng cao có ký tự văn bản tuỳ chỉnh vào bản đồ:

const pin = new google.maps.marker.PinElement({
  glyphText: "A",
});

const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: { lat: 51.493073, lng: -0.146550 },
  title: "Location Name",
});
marker.append(pin);

Với một vài điểm đánh dấu, bạn có thể xem vị trí của một số địa điểm cùng nhau.

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. Dưới đây là ví dụ về tính năng 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: Maps JavaScript API Cũng có sẵn: Places API (Mới) | Android | iOS

Bạn có thể chia sẻ Place Details mà mọi người cần trước khi họ ghé thăm một trong các địa điểm của bạn. Nhờ có Place Details phong phú như thông tin liên hệ, giờ hoạt động, điểm xếp hạng, ảnh và trạng thái đóng cửa tạm thời, mọi người sẽ biết chính xác những gì cần chuẩn bị khi ghé thăm địa điểm của bạn. Sau khi gọi Places API (Mới), bạn có thể lọc và hiển thị phản hồi trong một cửa sổ thông tin, thanh bên web hoặc theo bất kỳ cách nào khác mà bạn muốn.

Để yêu cầu Place Details, bạn cần có Mã địa điểm của từng vị trí. Hãy xem phần Lấy mã địa điểm để truy xuất mã địa điểm của vị trí của bạn.

Mở rộng để xem video về cách yêu cầu Place Details:

Xem giờ mở cửa

Kiểm tra đường bị đóng

Kiểm soát chi phí

Ví dụ sau đây sử dụng lớp Địa điểm trong Places Library, Maps JavaScript API để truy xuất Place Details và thêm các chi tiết đó vào 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 đị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ì tìm nạp trước thông tin chi tiết cho tất cả vị trí bất kể người dùng có quan tâm hay không.

     
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
    gmpClickable: true,
  });
  const place = new google.maps.places.Place({
    id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
  });
  const infowindow = new google.maps.InfoWindow();

  marker.addEventListener("gmp-click", async () => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "rating", "websiteURI"],
    });

    infowindow.setContent(
      "<div><strong>" +
        place.displayName +
        "</strong><br>" +
        place.formattedAddress +
        "<br>" +
        "Rating: " +
        place.rating +
        " stars<br>" +
        place.websiteURI +
        "</div>"
    );

    infowindow.open({
      map,
      anchor: marker,
    });
  });
  
  

Hiển thị các vị trí từ chế độ xem 45°

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

Việc cung cấp cho người dùng chế độ xem từ trên không về vị trí của bạn sẽ giúp họ hình dung rõ hơn về địa điểm đó, từ đó giúp họ tìm thấy địa điểm đó. Khi người dùng chọn một vị trí để 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 hiện có từ góc 45°.

Mã mẫu sau đây đặt bản đồ ở mức thu phóng cao, loại bản đồ tương thích và góc nghiêng sẽ hiển thị hình ảnh 45° nếu có. Thông tin chi tiết về phạm vi cung cấp hình ảnh 45° được giải thích trong tài liệu.

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

Đang đặt lại về chế độ xem bản đồ ban đầu

Người dùng thường muốn chuyển đổi qua lại giữa chế độ xem chi tiết của một vị trí và chế độ xem tóm tắt của một số vị trí lân cận. Để hỗ trợ việc này, hãy thêm một trình nghe để phát hiện thời điểm người dùng rời khỏi chế độ xem chi tiết trong các hoạt động tương tác với 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ề kiểu và độ nghiêng ban đầu.

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

Xác định vị trí của người dùng

Ví dụ này sử dụng: Maps JavaScript API Cũng có trên: 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í 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à định vị vị trí trên trình duyệt web để yêu cầu người dùng cấp sự cho phép của người dùng đặt điểm xuất phát 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 hoàn thành trước khi nhập trên phiên bản Google Maps dành cho người tiêu dùng. 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 thư viện Địa điểm của Google Maps Platform trên thiết bị di động và web. Khi người dùng nhập một địa chỉ, tính năng tự động hoàn thành sẽ điền phần còn lại thông qua việc sử dụng các tiện ích. Bạn cũng có thể cung cấp chức năng tự động hoàn thành của riêng mình bằng cách sử dụng trực tiếp Place Autocomplete Data API.

Để thêm thư viện Place Autocomplete vào trang web, bạn chỉ cần thêm một vài tham số truy vấn vào URL tập lệnh Maps JavaScript API. Trong ví dụ sau, phần bổ sung là libraries=places,marker.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>

Tiếp theo, hãy thêm một phần tử vùng chứa vào trang của bạn, nơi tiện ích PlaceAutocompleteElement sẽ được thêm vào.

<div id="autocomplete-container"></div>

Cuối cùng, hãy khởi chạy tiện ích PlaceAutocompleteElement và thêm tiện ích đó vào vùng chứa. Việc ràng buộc cụm từ gợi ý của tính năng Tự động hoàn thành địa điểm bằng includedPrimaryTypes: ["geocode"] sẽ định cấu hình tiện ích để chấp nhận địa chỉ đường phố, khu vực lân cận, thành phố và mã bưu chính, nhờ đó người dùng có thể nhập bất kỳ mức độ cụ thể nào để mô tả điểm xuất phát của họ. Khi người dùng chọn một cụm từ gợi ý, sự kiện gmp-select sẽ kích hoạt và bạn có thể gọi place.fetchFields() để yêu cầu trường location chứa vĩ độ và kinh độ của điểm xuất phát của người dùng. Bạn sẽ sử dụng các toạ độ bản đồ này để căn giữa lại bản đồ và cho biết mối quan hệ giữa các vị trí của bạn với điểm gốc.

  // Create the PlaceAutocompleteElement, restricting predictions to
  // geographical location types in the United Kingdom.
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
    includedPrimaryTypes: ["geocode"],
    includedRegionCodes: ["gb"],
  });
  placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
  document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

  // When the user selects an address from the drop-down,
  // zoom to the selected location and add an advanced marker.
  placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ["location", "formattedAddress"],
    });
    addUserLocation(place);
  });
}

Trong ví dụ này, sau khi người dùng chọn địa chỉ, hàm addUserLocation() sẽ được thực thi. Thao tác này sẽ lấy vị trí của kết quả trùng khớp, di chuyển bản đồ đến vị trí đó và thêm một điểm đánh dấu nâng cao.

function addUserLocation(place) {
  const pin = new google.maps.marker.PinElement({
    glyphText: "C",
  });

  // Add an advanced marker to the map.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
  });
  marker.append(pin);

  // Pan and zoom the map to the marker.
  map.panTo(place.location);
  map.setZoom(12);
}

Sau đó, bạn có thể 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 ảnh sau.

Hãy mở rộng phần này để xem video hướng dẫn từng bước về cách thêm tính năng Tự động hoàn thành địa điểm vào ứng dụng của bạn:

Trang web

Ứng dụng Android

Ứng dụng iOS

Đang hiển thị thời gian di chuyển và khoảng cách đến các vị trí gần nhất

Ví dụ này sử dụng: Routes API Cũng có: Thư viện tuyến đường, Maps JavaScript API

Sau khi có được vị trí của người dùng, bạn có thể so sánh vị trí này với vị trí của bạn. Việc này được thực hiện bằng tính năng Compute Route Matrix (Tính toán ma trận tuyến đường) trong Routes API (hoặc lớp RouteMatrix trong Thư viện tuyến đường, Maps JavaScript API) sẽ giúp người dùng chọn vị trí thuận tiện nhất cho họ theo thời gian lái xe hoặc quãng đường.

Việc hiển thị các vị trí gần người dùng ngụ ý rằng bạn đã điền sẵn các vị trí của mình. Khi sử dụng cơ sở dữ liệu vị trí của riêng bạn, điều quan trọng là phải đảm bảo dữ liệu ở định dạng có thể dùng trong bản đồ, chẳng hạn như GeoJSON, được mô tả trong chủ đề Lớp dữ liệu.

Cách tiêu chuẩn để sắp xếp danh sách vị trí là sắp xếp theo khoảng cách. Thông thường, khoảng cách này được tính bằng cách sử dụng đường thẳng từ người dùng đến vị trí, nhưng điều này có thể gây hiểu lầm. Đường thẳng có thể đi qua một con sông không thể vượt qua hoặc qua những con đường đông đúc vào thời điểm mà một vị trí khác có thể thuận tiện hơn. Điều này rất quan trọng khi bạn có nhiều địa điểm cách nhau vài km.

Phương thức computeRouteMatrix hoạt động bằng cách lấy danh sách các vị trí điểm xuất phát và điểm đến, sau đó trả về không chỉ khoảng cách di chuyển mà còn cả thời gian di chuyển giữa các vị trí đó. Trong trường hợp của người dùng, điểm xuất phát sẽ là vị trí hiện tại của họ hoặc điểm xuất phát mà họ 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 xuất phát và điểm đến dưới dạng cặp toạ độ, mã địa điểm hoặc địa chỉ. Bạn có thể sử dụng computeRouteMatrix với các lựa chọn ưu tiên về tuyến đường như TRAFFIC_AWARE để hiển thị kết quả dựa trên thời gian lái xe hiện tại hoặc trong tương lai.

Ví dụ sau đây gọi điểm cuối computeRouteMatrix trong Routes API, chỉ định mã địa điểm xuất phát và mã địa điểm đến của người dùng. Ví dụ này tính toán khoảng cách và thời gian di chuyển từ tâm bản đồ đến ba văn phòng của Google ở London:

curl -X POST -d '{
  "origins": [
    {
      "waypoint": {
        "location": {
          "latLng": {
            "latitude": 51.493490,
            "longitude": -0.097288
          }
        }
      }
    }
  ],
  "destinations": [
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
      }
    },
    {
      "waypoint": {
        "placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
      }
    }
  ],
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'

Phản hồi từ dịch vụ chứa khoảng cách (tính bằng mét) và thời gian cho mỗi cặp điểm xuất phát và điểm đến, tương tự như trong ví dụ sau:

Mở rộng để xem phản hồi mẫu:

[
  {
    "originIndex": 0,
    "destinationIndex": 0,
    "status": {},
    "distanceMeters": 4540,
    "duration": "924s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 1,
    "status": {},
    "distanceMeters": 5043,
    "duration": "1044s",
    "condition": "ROUTE_EXISTS"
  },
  {
    "originIndex": 0,
    "destinationIndex": 2,
    "status": {},
    "distanceMeters": 6919,
    "duration": "1357s",
    "condition": "ROUTE_EXISTS"
  }
]

Hình ảnh sau đây cho thấy điểm xuất phát (điểm đánh dấu màu đỏ C) và các điểm đến trên bản đồ:

Hình ảnh cho thấy bản đồ thành phố với vị trí của người dùng là điểm đánh dấu màu đỏ
               và các vị trí xung quanh là điểm đánh dấu màu xanh lục.

Khoảng cách theo đườ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ù Địa điểm B là gần nhất về khoảng cách, nhưng tuyến đường và thời gian để đến đó lại dài hơn vì Địa điểm A có thể đi đến bằng đường cao tốc.

Sau khi đưa ra yêu cầu này, bạn có thể xử lý kết quả trùng khớp để sắp xếp các phản hồi theo thời gian 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ề bộ định vị.

Ví dụ này sử dụng: Thư viện tuyến đường, Maps JavaScript API Cũng có: Dịch vụ web Routes API để sử dụng trên Android và iOS, trực tiếp từ ứng dụng hoặc từ xa thông qua proxy máy chủ

Việc cho người dùng xem đường đi ngay trong trang web hoặc ứng dụng của bạn giúp họ không cần phải rời khỏi trang web của bạn, tức 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 đồ. Với Routes API, bạn cũng có thể yêu cầu tuyến đường thân thiện với môi trường để ước tính mức sử dụng nhiên liệu hoặc năng lượng và cho biết tác động của hành trình đối với môi trường.

Lớp Route trong Thư viện tuyến đường, Maps JavaScript API cũng có các phương thức như createPolylines() và createWaypointAdvancedMarkers() cho phép bạn xử lý kết quả và hiển thị kết quả trên bản đồ.

Sau đây là ví dụ về cách yêu cầu và hiển thị tuyến đường trên bản đồ. Để biết thêm thông tin về mẫu, hãy xem phần Lấy tuyến đường.

Để tìm hiểu thêm về các tính năng này của Maps, hãy đọc Tài liệu về API JavaScript của Maps hoặc xem hướng dẫn từng bước trong lớp học lập trình để xây dựng một công cụ đị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í trong bảng điều khiển bên, bạn có thể cung cấp sự tiện lợi khi đặt lịch hẹn bằng một lần nhấp vào nút, 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 Trình tạo nhanh Locator Plus để cung cấp chức năng này ngay lập tức 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 Trình tạo nhanh Locator Plus để nhanh chóng nhập thông tin doanh nghiệp từ Trang doanh nghiệp. Sau khi nhập vào công cụ Trình tạo nhanh, bạn có thể bật đường liên kết đặt lịch hẹn được nhúng (nếu có) cho các địa điểm kinh doanh của mình bằng cách sử dụng tính năng Đặt chỗ bằng Google. Ngay cả khi không có Trang doanh nghiệp 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 nhà cung cấp dịch vụ đặt chỗ bên thứ ba thông qua tính năng Đặt chỗ bằng Google*.

Bật đường liên kết đặt lịch hẹn trong công cụ định vị cửa hàng bằng tính năng Đặt chỗ bằng Google
Thêm chức năng đặt lịch hẹn vào công cụ định vị cửa hàng

*Tính năng Đặt chỗ bằng Google chỉ hoạt động ở một số quốc gia/khu vực, dành cho những doanh nghiệp hợp tác với một nhà cung cấp dịch vụ đặt chỗ được hỗ trợ. Nếu bạn quan tâm đến tính năng Đặt chỗ bằng Google nhưng không hợp tác với một Đối tác của Google, hãy hướng dẫn nhà cung cấp của bạn gửi biểu mẫu 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à xem tài liệu của chúng tôi để biết cách bắt đầu. Nếu chưa hợp tác với một nhà cung cấp dịch vụ đặt chỗ, bạn có thể xem các nhà cung cấp đủ điều kiện trong mục Đặ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 của mình bằng Trang doanh nghiệp, các địa điểm 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 để bật chức năng liên kết bản đồ với dữ liệu doanh nghiệp.

API Trang doanh nghiệp cho phép bạn tạo các hành động (chẳng hạn như đặt lịch hẹn) mà bạn có thể truy xuất và hiển thị trên các nền tảng trong ứng dụng của mình, nhưng bạn cần thực hiện một số bước thủ công để bật tính năng này, như mô tả bên dưới.

Khi người dùng xem Chi tiết đị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.

  1. Tạo một placeActionLink của API Trang doanh nghiệp cho vị trí thuộc loại APPOINTMENT, ONLINE_APPOINTMENT hoặc DINING_RESERVATION. placeActionLink sẽ là đối tượng bạn dùng cho đường liên kết đến cuộc hẹn trong bảng điều khiển bên. (Nếu bạn đã tạo đường liên kết hành động đặt lịch hẹn mà bạn muốn, hãy chuyển sang bước tiếp theo.) Dưới đây là ví dụ về phản hồi từ một thao tác POST placeActionLinks.create thà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"
    }
  2. Tìm địa điểm trên Trang doanh nghiệp được liên kết với mã địa điểm trên Google Maps Platform.

    Khi xem Place Details, người dùng sẽ thấy thông tin chi tiết về một Mã địa điểm trên Google Maps Platform. Mã địa điểm được liên kết với mã vị trí của Trang doanh nghiệp, vì vậy, bạn cần tìm mã vị trí dựa trên mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đặ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:

    1. Liệt kê các tài khoản của dự án.
    2. Liệt kê tất cả các vị trí trong một tài khoản.
    3. Trong các vị trí của tài khoản, LocationKey chứa mã địa điểm trên Google Maps Platform mà bạn có thể so sánh với mã địa điểm của vị trí đang được xem.
  3. Khi có mã vị trí, bạn có thể lấy đường liên kết hành động mà mình muốn. Để truy xuất một đường liên kết đặt lịch hẹn hiện có placeActionLink, hãy liệt kê các đường liên kết đặt lịch hẹn hiện có placeActionLinks cho vị trí đó, rồi lọc theo placeActionType để tìm đường liên kết đặt lịch hẹn mà bạn muốn sử dụng (APPOINTMENT, ONLINE_APPOINTMENT hoặc DINING_RESERVATION).

    Ví dụ sau đây cho thấy một placeActionLink APPOINTMENT trong phản hồi từ lệnh gọi LIST.

     {
       "placeActionLinks": [
           {
               "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
               "providerType": "MERCHANT",
               "isEditable": true,
               "uri": "https://example.com/",
               "placeActionType": "APPOINTMENT",
               "createTime": "2021-05-01T01:17:41.609161Z",
               "updateTime": "2021-05-01T01:17:41.609161Z"
           }
       ]
     }
  4. 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ượng placeActionLink, đặc biệt là URI cho đường liên kết đặt phòng.

Các cách khác để thêm đường liên kết đến cuộc hẹn

Nếu bạn không quản lý Trang doanh nghiệp hoặc không muốn sử dụng giải pháp Trình tạo nhanh Locator Plus, hãy xem 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 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).

Đang hiển thị ưu đãi tại địa phương

Trong bảng điều khiển bên Chi tiết đị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) được liên kết với các vị trí của bạn. Hình sau đây minh hoạ một ví dụ về ưu đãi tại địa phương trong bảng điều khiển bên Chi tiết địa điểm.

(Sơ đồ cấu 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ị.)

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 trên Google Maps Platform cho vị trí mà người dùng đang xem. Khi có mã vị trí của Trang doanh nghiệp, bạn có thể truy xuất ưu đãi có liên quan dưới dạng localPost để hiển thị trong bảng điều khiển bên của Chi tiết địa điểm. Sau đây là các bước:

  1. Với Google My Business API, hãy tạo mọi bài đăng về ưu đãi mà bạn muốn hiển thị, thuộc loại OFFER.
  2. Tìm vị trí/mã vị trí của Trang doanh nghiệp được liên kết với mã địa điểm trên bản đồ.

    Khi người dùng xem Place Details, họ đang xem thông tin chi tiết về một Mã địa điểm trên Google Maps Platform. Mã địa điểm được liên kết với mã vị trí của Trang doanh nghiệp, vì vậy, bạn cần tìm mã vị trí dựa trên mã địa điểm trên bản đồ để truy xuất và hiển thị đường liên kết đến ưu đãi tại địa phương cho vị trí của bạn. Thực hiện các lệnh gọi API Trang doanh nghiệp sau:

    1. Liệt kê các tài khoản của dự án.
    2. Liệt kê tất cả các vị trí trong một tài khoản.
    3. Trong các vị trí của tài khoản, LocationKey chứ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à ví dụ về yêu cầu 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 locationKey, tức là 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"
        }
    }
          
  3. Giờ đây, khi đã có mã vị trí, bạn có thể nhận ưu đãi mà mình muốn. Để truy xuất một bài đăng ưu đãi hiện có, hãy liệt kê localPosts hiện có cho vị trí đó và lọc topicType của 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 tại địa phương đang hoạt động cho một địa điểm:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

    Ví dụ sau đây cho thấy OFFER localPost trong 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."
                }
            },
        ],
    }
            
  4. Tạo và điền dữ liệu liên quan từ đối tượng localPost vào <div> trong bảng điều khiển bên.

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 một số 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ế ghim bản đồ mặc định.
  • 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ị, giúp bạn thu hút sự chú ý của người dùng vào các vị trí của bạn, đồng thời làm nổi bật các địa danh giúp người dùng đến được vị trí gần nhất.

Tạo điểm đánh dấu bản đồ tuỳ chỉnh

Bạn có thể tuỳ chỉnh điểm đánh dấu nâng cao bằng cách thay đổi màu nền, đường viền hoặc ký tự mặc định của ghim (ví dụ: để cho biết liệu một vị trí có đang mở hay không), thay thế điểm đánh dấu bằng một hình ảnh đồ hoạ tuỳ chỉnh chẳng hạn như biểu trưng của thương hiệu hoặc tạo điểm đánh dấu HTML và CSS tuỳ chỉnh. Cửa sổ thông tin có thể cung cấp thêm thông tin cho người dùng, chẳng hạn như giờ mở cửa, số điện thoại hoặc ảnh.

Sau đây là bản đồ mẫu sử dụng điểm đánh dấu đồ hoạ tuỳ chỉnh. (Xem mã nguồn trong chủ đề về điểm đánh dấu đồ hoạ tuỳ chỉnh của API JavaScript Maps.)

Để biết thông tin chi tiết, hãy xem tài liệu về điểm đánh dấu nâng cao cho JavaScript (web), Android và iOS.

Định kiểu bản đồ

Google Maps Platform cho phép bạn tạo kiểu cho bản đồ theo những 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 bản đồ cho phù hợp với thương hiệu của mình và có thể giảm sự phân tâm trên bản đồ bằng cách kiểm soát các địa điểm yêu thích mà người dùng nhìn thấy. Google Maps Platform cũng cung cấp một số mẫu bản đồ khởi đầu, trong đó có một số mẫu được tối ưu hoá cho nhiều ngành, chẳng hạn như du lịch, hậu cần, bất động sản và bán lẻ.

Bạn có thể tạo hoặc sửa đổi kiểu bản đồ trong trang Kiểu bản đồ của Google Cloud Console trong dự án của mình.

Mở rộng để xem ảnh động về cách tạo và tạo kiểu bản đồ trong Cloud Console:

Kiểu bản đồ theo ngành

Ảnh động này cho thấy các kiểu bản đồ được xác định trước theo ngành mà bạn có thể sử dụng. Những kiểu này là đ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 bớt các địa điểm yêu thích trên bản đồ, giúp người dùng tập trung vào 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ể.

Trên trang Kiểu bản đồ, nhấp chuột vào Tạo kiểu bản đồ mới. Trên trang Kiểu bản đồ mới, chuột nhấp vào nút chọn bên cạnh từng kiểu được tối ưu hoá theo ngành sau đây: Du lịch, Logistics, Bất động sản và Bán lẻ. Khi bạn nhấp vào từng nút, nội dung mô tả kiểu bản đồ và bản xem trước đồ hoạ sẽ thay đổi.

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 độ địa điểm yêu thích 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 đồ.

Trên trang Kiểu bản đồ, nhấp chuột vào Tạo kiểu bản đồ mới. Trên trang Kiểu bản đồ mới, trong mục Tạo kiểu của riêng bạn, nút chọn Bản đồ Google sẽ được chọn. Nhấp chuột vào nút chọn Atlas cho kiểu Atlas, sau đó nhấp vào Mở trong Trình chỉnh sửa kiểu. Trong Trình chỉnh sửa kiểu, chuột nhấp vào đối tượng Địa điểm yêu thích, sau đó nhấp vào phần tử Biểu tượng, đặt màu thành màu đỏ. Sau đó, con trỏ chuột chọn hộp đánh dấu Mật độ địa điểm yêu thích và trượt nút điều khiển mật độ sang phải để có mật độ tối đa. Càng nhiều điểm đánh dấu màu đỏ xuất hiện trên bản xem trước bản đồ thì mật độ càng cao. Sau đó, chuột di chuyển
                đến nút Lưu.

Mỗi kiểu bản đồ đều có mã nhận dạng riêng. Sau khi xuất bản một kiểu trong Cloud Console, bạn sẽ tham chiếu mã bản đồ đó trong mã của mình. Điều này có nghĩa là bạn có thể cập nhật kiểu bản đồ theo thời gian thực mà không cần tái cấu trúc ứng dụng. Giao diện mới sẽ tự động xuất hiện trong ứng dụng hiện có và được dùng trên nhiều nền tảng. Các ví dụ sau đây cho thấy cách thêm mã bản đồ vào trang web bằng API JavaScript của Maps.

Bằng cách đưa một hoặc nhiều map_ids vào URL tập lệnh, Maps JavaScript API sẽ tự động cung cấp các kiểu đó để kết xuất 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 hiển thị một bản đồ phong cách riêng trên trang web. (Không hiển thị 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 tính năng định kiểu bản đồ dựa trên đám mây trong JavaScript (web), Android, và iOS.

Thu thập thông tin chi tiết về mức sử dụng bằng số liệu phân tích

Bằng cách sử dụng số liệu phân tích, bạn có thể 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 bộ định vị của bạn. Phần này hướng dẫn cách định cấu hình và theo dõi Google Analytics cũng như số liệu phân tích của Trang doanh nghiệp để theo dõi dữ liệu bạn cần. Đối với người dùng Trình tạo nhanh Locator Plus, trang tổng quan số liệu phân tích giúp bạn phân tích và tạo thông tin chi tiết do AI tạo dựa trên dữ liệu ẩn danh.

Trang tổng quan về số liệu phân tích của công cụ định vị cửa hàng hiển thị mức độ tương tác của người dùng và các chỉ số hiệu suất
Trang tổng quan về số liệu phân tích của công cụ định vị cửa hàng cung cấp cho bạn các chỉ số hiệu suất

Để truy cập vào báo cáo này, hãy chuyển đến phần báo cáo về mức độ tương tác của Google Cloud Console. Để biết thêm thông tin chi tiết về báo cáo này, hãy xem bài viết báo cáo về mức độ tương tác.

Vì Google Analytics cung cấp nhiều tính năng, nên chúng tôi sẽ không cung cấp thông tin đầy đủ về cách thiết lập và sử dụng. Thay vào đó, chúng tôi sẽ hướng dẫn bạn đến tài liệu chính để đọc thêm và xem hướng dẫn, đồng thời nêu bật những điểm cần lưu ý về số liệu phân tích chính cho ứng dụng định vị của bạn.

Thiết lập Google Analytics

Nếu đang sử dụng Google Analytics với ứng dụng của mình, bạn có thể bỏ qua phần này.

Sau đây là ví dụ về "Thẻ toàn trang web" 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, điều quan trọng là bạn phải hiểu cách sử dụng phương thức triển khai Google Analytics để làm những việc sau:

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 trình định vị:

gtag('event', 'location', {
  'method': 'address'
});

Bạn cần đặt tên cho event và method sao cho đủ 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 của tính năng Tự động hoàn thành, như minh hoạ trong hình sau.

Bạn có thể gửi lệnh gọi theo dõi sau đây đến Google Analytics bằng cách sử dụng sự kiện và phương thức mà bạn đã xác định. (Chúng tôi sẽ hiển thị từng 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 chế độ xem Kiểm tra của trình duyệt, trên thẻ Mạng. (Nhấp để phóng to).

Bạn có thể xác minh rằng các thẻ sự kiện tuỳ chỉnh 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" (vị trí) được thiết lập trước đó cho tính năng Place Autocomplete sẽ xuất hiện trong Google Analytics như 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ờ thì mới có thể xem 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 lưu lượng người ghé thăm cửa hàng thực tế từ ứng dụng định vị. Ví dụ: Google Analytics có dịch vụ Lượt ghé thăm cửa hàng thực tế trong Analytics, giúp liên kết số liệu phân tích về 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 về ứng dụng định vị. Bạn cũng có thể phát triển chiến lược riêng để thu hút người dùng ứng dụng đến cửa hàng thực tế, chẳng hạn như cung cấp ưu đãi trực tuyến có thể sử dụng tại cửa hàng thực tế.

Các chỉ số trên Trang doanh nghiệp

Ngoài việc theo dõi các sự kiện, chỉ số và phương diện mà bạn quan tâm bằng Google Analytics, Trang doanh nghiệp cũng có chỉ số riêng. Ví dụ: nếu thêm đường liên kết đặt lịch 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à số lượt nhấp đó.

Yêu cầu mẫu sau đây đối với API Trang doanh nghiệp yêu cầu nhiều loại chỉ số. Để theo dõi lượt nhấp vào mặt hàng, các chỉ số LOCAL_POST_VIEWS_SEARCH và LOCAL_POST_ACTIONS_CALL_TO_ACTION sẽ phù hợp nhất.

Mở rộng để xem yêu cầu mẫu.

POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
 "locationNames": [
   "accounts/111098884960528804666/locations/15899957830169237700"
 ],
 "basicRequest": {
         "metricRequests": [
            {
              "metric": "QUERIES_DIRECT"
            },
            {
              "metric": "QUERIES_INDIRECT"
            },
            {
              "metric": "VIEWS_MAPS"
            },
            {
              "metric": "VIEWS_SEARCH"
            },
            {
                "metric": "ACTIONS_DRIVING_DIRECTIONS"
            },
            {
                "metric": "LOCAL_POST_VIEWS_SEARCH"
            },
            {
                "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
            }
         ],
         "timeRange": {
              "startTime": "2021-01-01T01:01:23.045123456Z",
              "endTime": "2021-04-30T23:59:59.045123456Z"
         }
   }
}

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í trên Google Maps
  • 631 lượt xem vị trí trên Google Tìm kiếm.
  • 3 yêu cầu về Đường lái xe đến vị trí.
  • 42 LOCAL_POST_ACTIONS_CALL_TO_ACTION lượt nhấp vào mặt hàng.
  • 11 lượt xem Bài đăng địa phương trên Google Tìm kiếm.

Một lựa chọn khác về chỉ số là sử dụng tính năng Đặt chỗ bằng Google để tạo đường liên kết hành động. Khi người dùng nhấp vào đường liên kết hành động được tạo trong tính năng Đặt chỗ bằng Google, bạn có thể ghi lại những hành động đó vào Google Analytics để 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 bạn đang thực hiện như thế nào so với KPI của mình. Những con số này cũng giúp bạn hiểu được những điểm cải tiến này của công cụ định vị ảnh hưởng như thế nào đến 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 được số lượng khách hàng nhận thông tin đường đi từ công cụ định vị của bạn và Google Maps để 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.

Đang gửi thông tin đường đi đến thiết bị di động

Để giúp người dùng dễ dàng đến một địa điểm hơn, 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 dụng Google Maps sẽ khởi chạy trên điện thoại của họ nếu đã được 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 tính nă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 URL chỉ đường như sau, trong đó tên địa điểm được mã hoá URL là tham số destination và mã địa điểm là tham số destination_place_id. Bạn không mất phí khi soạn hoặc sử dụng URL của Maps, vì vậy, bạn không cần đưa khoá API vào URL.

      https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

Bạn có thể tuỳ ý cung cấp tham số truy vấn origin bằng cách sử dụng cùng định dạng địa chỉ với đích đến. Tuy nhiên, nếu bạn bỏ qua tham số này, thì đườ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. URL của Maps cung cấp thêm các tuỳ chọn tham số truy vấn, chẳng hạn như travelmode và dir_action=navigate để bắt đầu đường đi khi bật tính năng 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ột sân vận động bóng đá ở Luân Đôn và sử dụng travelmode=transit để cung cấp đường đi bằng phương tiện công cộng đến điểm đến.

Để gửi tin nhắn văn bản hoặc email có chứa URL này, bạn nên sử dụng một ứng dụng bên thứ ba, chẳng hạn như twilio. Nếu đang sử dụng App Engine, bạn có thể dùng các công ty bên thứ ba để gửi tin nhắn SMS hoặc email. Để biết thêm thông tin, hãy xem phần Gửi tin nhắn bằng dịch vụ của bên thứ ba.

Hiển thị Chế độ xem đường phố để giúp người dùng hình dung về các vị trí

Đối với nhiều vị trí trên thế giới, bạn có thể sử dụng Chế độ xem đường phố để hiển thị bên ngoài một vị trí, giúp người dùng hình dung về vị trí đó trước khi họ đế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 có muốn người dùng "nhìn xung quanh" khu vực đó ở chế độ 360 độ hay không. Chế độ xem đường phố cũng có trên Android và iOS.

Xác định vị trí của người dùng bằng tính năng Định vị địa lý

Trong hầu hết các trường hợp, bạn có thể xác định chính xác vị trí của người dùng bằng cá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ề cách yêu cầu quyền và lấy thông tin vị trí trong Android và iOS. Tuy nhiên, có thể có những trường hợp bạn muốn có một công cụ tìm vị trí thay thế; ví dụ: nếu dịch vụ vị trí của thiết bị bị tắt hoặc bạn lo ngại về việc vị trí 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à 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 khách có thể phát hiện. Bạn có thể sử dụng tính năng Định vị đị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 tính năng này để kiểm tra chéo báo cá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 tôi đã đề cập đến việc sử dụng Place Details để cung cấp cho người dùng thông tin phong phú 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 về mức giá và SKU của các trường dữ liệu khác nhau trong Places API (Mới). Để quản lý chi phí, một chiến lược là kết hợp thông tin bạn đã có về vị trí của mình với thông tin mới từ Google Maps, chẳng hạn như thông tin đóng cửa tạm thời, giờ hoạt động vào ngày lễ, điểm xếp hạng từ người dù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 của mình, bạn sẽ không cần yêu cầu các trường đó từ Place Details và có thể ràng buộc mặt nạ trường để chỉ tìm nạp các trường 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ì Chi tiết địa điểm. Lớp học lập trình cho công cụ định vị toàn diện 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.