Công cụ định vị sản phẩm – hướng dẫn triển khai

Tổng quan

Khi nhìn thấy sản phẩm của bạn trên mạng, người dùng muốn tìm cách tốt nhất và thuận tiện nhất để đặt hàng. Hướng dẫn triển khai Trình định vị sản phẩm và các mẹo tuỳ chỉnh mà chúng tôi cung cấp trong chủ đề này là những nội dung mà bạn nên tham khảo để kết hợp tối ưu các API của Nền tảng Google Maps nhằm xây dựng trải nghiệm tuyệt vời cho người dùng trình định vị sản phẩm.

Bằng cách làm theo hướng dẫn triển khai này, bạn có thể giúp khách hàng xem thông tin chi tiết mà họ cần để tìm sản phẩm của bạn, đồng thời cung cấp cho họ đường đi đến cửa hàng có mặt hàng họ cần, cho dù họ đang lái xe, đi xe đạp, đi bộ hay đi phương tiện công cộng.

Bật API

Để triển khai Trình định vị sản phẩm, bạn phải bật các API sau trong Google Cloud Console. Các đường liên kết siêu văn bản sau đây sẽ đưa bạn đến Google Cloud Console để bật từng API cho dự án bạn đã chọn:

• Maps JavaScript API
• Places API
• Geocoding API
• Distance Matrix API
• Directions API

Để 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 Nền tảng Google Maps.

Các phần trong hướng dẫn triển khai

Sau đây là các phương thức triển khai và tuỳ chỉnh mà chúng ta sẽ đề cập trong chủ đề này.

• check_circle_filled Biểu tượng dấu kiểm là một bước triển khai cốt lõi.
• stars Biểu tượng ngôi sao là một tuỳ chọn tuỳ chỉnh không bắt buộc nhưng nên dùng để nâng cao giải pháp.

check_circle_filled	Liên kết vị trí cửa hàng với địa điểm trên Nền tảng Google Maps	So khớp vị trí cửa hàng với một địa điểm trong Google Maps Platform.
check_circle_filled	Xác định vị trí của người dùng	Thêm chức năng nhập 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.
check_circle_filled	Xác định cửa hàng 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, có thể chỉ định nhiều phương tiện di chuyển như đi bộ, lái xe, phương tiện công cộng hoặc đạp xe.
check_circle_filled	Hiển thị thông tin cửa hàng	Hiển thị thông tin giàu dữ liệu trên cửa hàng của bạn để người dùng có thể dễ dàng truy cập vào các cửa hàng đó hơn.
stars	Cung cấp chỉ dẫn đường đi	Nhận dữ liệu chỉ đường từ điểm xuất phát đến điểm đến bằng nhiều phương tiện di chuyển như đi bộ, lái xe, đi xe đạp và phương tiện công cộng.
stars	Gửi thông tin đường đi đến thiết bị di động	Ngoài việc hiển thị đường đi trên trang web, bạn cũng có thể gửi đường đi đến điện thoại của người dùng để họ có thể sử dụng Google Maps khi di chuyển.
stars	Hiển thị vị trí của bạn trên một bản đồ tương tác	Tạo điểm đánh dấu tuỳ chỉnh trên bản đồ để giúp các vị trí của bạn nổi bật và tạo kiểu cho bản đồ sao cho phù hợp với màu sắc thương hiệu của bạn. Hiển thị (hoặc ẩn) các điểm yêu thích (POI) cụ thể trên bản đồ để giúp người dùng định hướng bản thân tốt hơn và kiểm soát mật độ POI để tránh tình trạng bản đồ lộn xộn.
stars	Kết hợp dữ liệu vị trí tuỳ chỉnh với Thông tin chi tiết về địa điểm	Kết hợp thông tin chi tiết về vị trí tuỳ chỉnh của riêng bạn với Thông tin chi tiết về địa điểm để cung cấp cho người dùng một tập hợp dữ liệu phong phú nhằm đưa ra quyết định.

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

Ví dụ này sử dụng: Places API

Cũng có: JavaScript

Bạn có thể có một cơ sở dữ liệu về các cửa hàng của mình với thông tin cơ bản như tên, địa chỉ và số điện thoại của vị trí đó. Bạn muốn liên kết cơ sở dữ liệu này với một địa điểm trong Google Maps Platform dưới dạng một tập hợp các đích đến cuối cùng mà người dùng có thể đến lấy sản phẩm. Để tìm nạp thông tin mà Nền tảng Google Maps 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 cửa hàng trong cơ sở dữ liệu của bạn. Bạn có thể thực hiện lệnh 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 API Địa điểm và chỉ yêu cầu trường place_id.

Sau đây là ví dụ về cách yêu cầu mã địa điểm cho văn phòng của Google ở London:

    https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a

Bạn có thể lưu trữ mã địa điểm này trong cơ sở dữ liệu cùng với phần dữ liệu còn lại về cửa hàng và sử dụng mã này như một cách hiệu quả để yêu cầu thông tin về cửa hàng. Sau đây là hướng dẫn sử dụng mã địa điểm để mã hoá địa lý, truy xuất Thông tin chi tiết về địa điểm và yêu cầu chỉ đường đến địa điểm đó.

Mã hoá địa lý các vị trí của bạn

Ví dụ này sử dụng: API Địa chỉ

Cũng có: JavaScript

Nếu cơ sở dữ liệu cửa hàng của bạn có địa chỉ đường phố nhưng không có toạ độ địa lý, hãy sử dụng API Mã hoá địa lý để lấy vĩ độ và kinh độ của địa chỉ đó nhằm mục đích tính toán xem cửa hàng nào gần khách hàng nhất. Bạn có thể mã hoá địa lý cửa hàng ở phía máy chủ, lưu trữ vĩ độ và kinh độ trong cơ sở dữ liệu 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 API Địa chỉ để lấy vĩ độ và kinh độ của mã địa điểm được trả về cho văn phòng của Google ở London:

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

Ví dụ này sử dụng: Thư viện tự động hoàn thành địa điểm trong API Maps JavaScript

Cũng có trên: Android | iOS

Một thành phần chính trong Trình định vị sản phẩm là xác định vị trí bắt đầu của người dùng. Bạn có thể cung cấp cho người dùng hai lựa chọn để chỉ định vị trí bắt đầu: nhập nguồn gốc của nội dung tìm kiếm hoặc cấp quyền cho dịch vụ vị trí trên trình duyệt web hoặc dịch vụ vị trí trên thiết bị di động.

Xử lý các mục nhập đã nhập bằng tính năng tự động hoàn thành

Người dùng hiện nay đã quen với chức năng tự động hoàn thành nhập trước 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 Nền tảng Google Maps trên thiết bị di động và web. Khi người dùng nhập một địa chỉ, tính năng tự động hoàn thành sẽ điền phần còn lại thông qua việc sử dụng các tiện ích. Bạn cũng có thể cung cấp chức năng tự động hoàn thành của riêng mình bằng cách trực tiếp sử dụng các thư viện Địa điểm.

Trong ví dụ sau, hãy thêm thư viện Tự động hoàn thành địa điểm vào trang web của bạn bằng cách thêm tham số libraries=places vào URL tập lệnh API JavaScript của Maps.

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

Tiếp theo, hãy thêm một hộp văn bản vào trang của bạn để người dùng nhập 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 chạy dịch vụ Tự động điền và liên kết dịch vụ này với hộp văn bản đã đặt tên. Việc ràng buộc dự đoán Tự động hoàn thành địa điểm theo loại mã địa lý sẽ định cấu hình trường nhập để chấp nhận địa chỉ đường phố, khu vực lân cận, thành phố và mã zip để người dùng có thể nhập bất kỳ cấp độ cụ thể nào để mô tả nguồn gốc 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 để cho biết mối quan hệ của các vị trí với điểm gốc.

// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
  componentRestrictions: {'country': ['gb']},
  fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", searchFromOrigin);
}

Trong ví dụ này, sau khi người dùng chọn địa chỉ, hàm searchFromOrigin() sẽ bắt đầu. Phương thức này lấy hình học của kết quả được so khớp là vị trí của người dùng, sau đó tìm kiếm các vị trí gần nhất dựa trên các toạ độ đó làm gốc, như đã thảo luận trong phần Xác định cửa hàng gần nhất.

Sử dụng thông tin vị trí địa lý của trình duyệt

Để yêu cầu và xử lý thông tin vị trí địa lý của trình duyệt HTML5, hãy xem cách bật cửa sổ Sử dụng vị trí của tôi:

Ví dụ này sử dụng: Dịch vụ ma trận khoảng cách, API Maps JavaScript

Cũng có: Distance Matrix API

Sau khi có thông tin vị trí của người dùng, bạn có thể so sánh thông tin này với vị trí cửa hàng của mình. Khi thực hiện việc này bằng Dịch vụ ma trận khoảng cách, API Maps JavaScript 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.

Cách chuẩn để sắp xếp danh sách vị trí là sắp xếp theo khoảng cách. Thông thường, khoảng cách này được tính toán đơ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ể đi qua hoặc đi qua những con đường đông đúc vào thời điể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.

Dịch vụ Ma trận khoảng cách, API Maps JavaScript hoạt động bằng cách lấy danh sách các vị trí xuất phát và đích đến, đồng thời trả về không chỉ khoảng cách di chuyển mà còn cả thời gian 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à nơi họ hiện đang ở hoặc điểm xuất phát mong muốn của họ và điểm đến sẽ là điểm đến của các vị trí. Bạn có thể chỉ định điểm xuất phát và điểm đến dưới dạng cặp toạ độ hoặc địa chỉ; khi bạn gọi dịch vụ, dịch vụ sẽ so khớp các địa chỉ. Bạn có thể sử dụng Dịch vụ ma trận khoảng cách, API Maps JavaScript với các tham số bổ sung để hiển thị kết quả dựa trên thời gian lái xe hiện tại hoặc trong tương lai.

Ví dụ sau gọi Dịch vụ ma trận khoảng cách, API Maps JavaScript, chỉ định điểm xuất phát của người dùng và 25 vị trí cửa hàng cùng một lúc.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

Đối với mỗi vị trí lân cận, bạn có thể hiển thị trạng thái kho hàng của sản phẩm dựa trên cơ sở dữ liệu kho hàng.

Ví dụ này sử dụng: Thư viện địa điểm, API Maps JavaScript

Cũng có: SDK Địa điểm dành cho Android | SDK Địa điểm dành cho iOS | API Địa điểm

Bạn có thể chia sẻ Thông tin chi tiết về địa điểm đa dạng thức như thông tin liên hệ, giờ hoạt động và trạng thái mở cửa hiện tại để giúp khách hàng chọn vị trí họ muốn hoặc hoàn tất đơn đặt hàng.

Sau khi thực hiện lệnh gọi đến Maps JavaScript API để nhận Thông tin chi tiết về địa điểm, bạn có thể lọc và hiển thị phản hồi.

Để yêu cầu Thông tin chi tiết về địa điểm, bạn cần có mã địa điểm của từng vị trí. Hãy xem phần Lấy mã địa điểm để truy xuất mã địa điểm của vị trí.

Yêu cầu Thông tin chi tiết về địa điểm sau đây sẽ trả về địa chỉ, toạ độ, trang web, số điện thoại, điểm xếp hạng và giờ hoạt động cho mã địa điểm Google London:

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};


service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

---

Cải thiện công cụ định vị sản phẩm

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 thêm trải nghiệm của người dùng.

Ví dụ này sử dụng: Dịch vụ chỉ đường API Maps JavaScript

Cũng có: Dịch vụ web Directions 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ủ

Khi bạn hiển thị cho người dùng đường đi từ trang web hoặc ứng dụng của mình, người dùng không cần rời khỏi trang web của bạn và 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ể hiển thị lượng khí thải carbon của một phương tiện di chuyển cụ thể và cho thấy tác động của bất kỳ chuyến đi cụ thể nào bằng cách sử dụng một tập dữ liệu carbon mà bạn có thể sở hữu.

Dịch vụ chỉ đường cũng có các hàm cho phé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ị hướng dẫn bằng văn bản.

Để giúp người dùng dễ dàng đến một địa điểm hơn nữa, bạn có thể gửi tin nhắn hoặc email cho họ một đường liên kết đến chỉ dẫn. Khi người dùng nhấp vào đường liên kết này, ứng dụng Google Maps sẽ khởi chạy trên điện thoại của họ nếu họ đã cài đặt ứng dụng này hoặc maps.google.com sẽ tải trong trình duyệt web của thiết bị. Cả hai trải nghiệm này đều cho phép người dùng sử dụng tính năng chỉ đường từng chặng, bao gồm cả hướng dẫn bằng giọng nói, để đến điểm đến.

Sử dụng URL Maps để tạo URL chỉ đường như sau, trong đó 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 của Maps, vì vậy, bạn không cần thêm khoá API vào URL.

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

Bạn có thể tuỳ ý cung cấp tham số truy vấn origin bằng cách sử dụng cùng một định dạng địa chỉ với đích đến. Tuy nhiên, khi bạn bỏ qua tham số này, chỉ đường sẽ bắt đầu từ vị trí hiện tại của người dùng, có thể khác với vị trí họ đang sử dụng ứng dụng Tìm sản phẩm. URL của Maps cung cấp các tuỳ chọn tham số truy vấn bổ sung, chẳng hạn như travelmode và dir_action=navigate để khởi chạy chỉ đường khi bật tính năng chỉ đường.

Liên kết có thể nhấp này mở rộng URL mẫu ở trên, đặt origin làm sân vận động bóng đá ở London và sử dụng travelmode=transit để cung cấp chỉ dẫn đi bằng phương tiện công cộng đến đích.

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

Sử dụng bản đồ động

Ví dụ này sử dụng: Maps JavaScript API

Cũng có trên: Android | iOS

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

Bạn có thể thêm một bản đồ động vào trang của mình (tức là một bản đồ mà người dùng có thể di chuyển, thu phóng và xem thông tin chi tiết về các vị trí và điểm yêu thích khác nhau) 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.

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

URL tham chiếu đến hàm initMap JavaScript 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 khu vực cũng đảm bảo rằng hành vi của các ứng dụng được sử dụng bên ngoài Hoa Kỳ 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 Nền tảng Google Maps để biết danh sách đầy đủ các ngôn ngữ và khu vực được hỗ trợ, đồng thời tìm hiểu thêm về cách sử dụng tham số region.

Tiếp theo, bạn cần có 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, hiển thị trong ví dụ sau, bạn có thể đặt vị trí ban đầu, loại bản đồ và các chế độ điều khiển sẽ có trên bản đồ cho người dùng. Lưu ý rằng getElementById() tham chiếu đến mã nhận dạng div "bản đồ" ở 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 trình đị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 độ bản đồ được thu phóng vào vị trí đó). Bạn không bắt buộc phải sử dụng hầu hết các thành phần khác (chẳng hạn như điều chỉnh các chế độ điều khiển) khi xác định mức độ tương tác với 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ụ: 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 tính năng trên bản đồ để thể hiện thương hiệu của bạn.
• Kiểm soát những điểm tham quan mà bạn hiển thị (điểm tham quan, nhà hàng, nhà nghỉ, v.v.) và mật độ của các điểm tham quan đó, cho phép bạn tập trung 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 tuỳ chỉnh trên bản đồ

Bạn có thể tuỳ chỉnh điểm đánh dấu bằng cách thay đổi màu mặc định (có thể cho biết liệu một vị trí có đang mở hay không) hoặc thay thế điểm đánh dấu bằng hình ảnh tuỳ chỉnh, chẳng hạn như biểu trưng của thương hiệu. Cửa sổ thông tin hoặc cửa sổ bật lên có thể cung cấp thêm thông tin cho người dùng, chẳng hạn như giờ mở cửa, số điện thoại hoặc thậm chí là ảnh. Bạn cũng có thể tạo điểm đánh dấu tuỳ chỉnh là điểm ảnh, vectơ, 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ủ đề về điểm đánh dấu tuỳ chỉnh của API JavaScript của Maps.)

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

Định kiểu cho bản đồ

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

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

Mỗi kiểu bản đồ đều có mã riêng. Sau khi phát hành một kiểu trong Cloud Console, bạn sẽ tham chiếu mã nhận dạng 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 sử 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 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, API JavaScript của Maps 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ã.

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>

Mã sau đây hiển thị một bản đồ được tạo kiểu trên trang web. (Không hiển thị 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 kiểu bản đồ dựa trên đám mây trong JavaScript (web), Android và iOS.

Trong phần Hiển thị vị trí của bạn trên bản đồ tương tác trước đó, chúng tôi đã đề cập đến việc sử dụng Thông tin chi tiết về địa điểm để cung cấp cho người dùng nhiều thông tin về vị trí của bạn, chẳng hạn như giờ mở cửa, ảnh và bài đánh giá.

Bạn nên hiểu rõ chi phí của các trường dữ liệu trong phần Thông tin 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, Thông tin liên hệ và Dữ liệu về bầu không khí. Để quản lý chi phí, bạn có thể kết hợp thông tin bạn đã có về các 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ư tạm thời đóng cửa, giờ làm việc vào ngày lễ, điểm xếp hạng của người dùng, ảnh và bài đánh giá. Nếu đã có thông tin liên hệ cho cửa hàng, bạn sẽ không cần yêu cầu các trường đó từ Thông tin chi tiết về địa điểm và có thể hạn chế yêu cầu của mình chỉ tìm nạp các trường Dữ liệu cơ bản hoặc Dữ liệu về bầu không khí, 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 của riêng mình để bổ sung hoặc sử dụng thay vì Thông tin chi tiết về địa điểm. Lớp học lập trình về trình định vị toàn stack 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.