Thông báo: Kiểu bản đồ cơ sở mới sắp ra mắt trên Nền tảng Google Maps. Bản cập nhật này về kiểu bản đồ bao gồm bảng màu mặc định mới, ghim hiện đại và các điểm cải tiến về trải nghiệm và khả năng sử dụng bản đồ. Tất cả kiểu bản đồ sẽ được tự động cập nhật vào tháng 3 năm 2025. Để biết thêm thông tin về phạm vi cung cấp và cách chọn sử dụng sớm hơn, hãy xem bài viết Kiểu bản đồ mới cho Nền tảng Google Maps.

Trang này được dịch bởi Cloud Translation API.

Chính sách đối với API Maps JavaScript

Chủ đề này cung cấp các yêu cầu phân bổ cho tất cả ứng dụng được phát triển bằng API Maps JavaScript, bao gồm cả dịch vụ Tự động hoàn thành địa điểm là một phần của API đó. Để biết thêm các điều khoản của Nền tảng Google Maps, hãy xem Điều khoản dịch vụ của Nền tảng Google Maps.

Cung cấp điều khoản sử dụng và chính sách quyền riêng tư

Nếu phát triển ứng dụng API JavaScript của Maps, bạn phải cung cấp Điều khoản sử dụng và Chính sách quyền riêng tư cùng với ứng dụng của mình. Ứng dụng đó phải đáp ứng các nguyên tắc nêu trong Thoả thuận của bạn với Google:

Điều khoản sử dụng và Chính sách quyền riêng tư phải được công bố công khai.
Bạn phải nêu rõ trong Điều khoản sử dụng của ứng dụng rằng khi sử dụng ứng dụng, người dùng phải tuân thủ Điều khoản dịch vụ của Google.
Bạn phải thông báo cho người dùng trong Chính sách quyền riêng tư rằng bạn đang sử dụng(các) API Maps của Google và đưa Chính sách quyền riêng tư của Google vào bằng cách tham chiếu.

Bạn nên đăng Điều khoản sử dụng và Chính sách quyền riêng tư ở vị trí nào tuỳ thuộc vào nền tảng của ứng dụng.

Ứng dụng dành cho thiết bị di động

Nếu phát triển ứng dụng di động, bạn nên cung cấp đường liên kết đến Điều khoản sử dụng và Chính sách quyền riêng tư trên trang tải xuống của ứng dụng trong cửa hàng ứng dụng có liên quan và trong trình đơn cài đặt ứng dụng.

Ứng dụng web

Nếu phát triển ứng dụng web, bạn nên cung cấp đường liên kết đến Điều khoản sử dụng và Chính sách quyền riêng tư ở chân trang web.

Tìm nạp trước, lưu vào bộ nhớ đệm hoặc lưu trữ nội dung

Các ứng dụng sử dụng API JavaScript của Maps phải tuân thủ các điều khoản của thoả thuận giữa bạn và Google. Theo các điều khoản của Thoả thuận, bạn không được tìm nạp trước, lập chỉ mục, lưu trữ hoặc lưu vào bộ nhớ đệm bất kỳ Nội dung nào, ngoại trừ trong các điều kiện hạn chế nêu trong điều khoản.

Xin lưu ý rằng mã địa điểm dùng để xác định duy nhất một địa điểm sẽ không phải tuân thủ các quy định hạn chế về việc lưu vào bộ nhớ đệm. Mã địa điểm được trả về trong trường place_id trong phản hồi của API Maps JavaScript. Tìm hiểu cách lưu, làm mới và quản lý mã địa điểm trong Hướng dẫn về mã địa điểm.

Hiển thị kết quả của Maps JavaScript API

Bạn có thể hiển thị kết quả của API JavaScript của Maps trên Google Maps hoặc không có bản đồ. Nếu bạn muốn hiển thị kết quả của API JavaScript của Maps trên bản đồ, thì các kết quả này phải hiển thị trên Google Maps. Bạn không được sử dụng dữ liệu API JavaScript của Maps trên một bản đồ không phải là bản đồ của Google.

Hiển thị biểu trưng và thông tin ghi công của Google

Nếu ứng dụng của bạn hiển thị dữ liệu trên Google Maps, thì biểu trưng Google sẽ xuất hiện và không được thay đổi. Các ứng dụng hiển thị dữ liệu của Google trên cùng màn hình với Google Maps không bắt buộc phải cung cấp thêm thông tin phân bổ cho Google.

Nếu ứng dụng của bạn hiển thị dữ liệu trên một trang hoặc thành phần hiển thị không đồng thời hiển thị Google Maps, thì bạn phải hiển thị biểu trưng Google cùng với dữ liệu đó. Ví dụ: nếu ứng dụng của bạn hiển thị dữ liệu của Google trên một thẻ và Google Maps có dữ liệu đó trên một thẻ khác, thì thẻ đầu tiên phải hiển thị biểu trưng của Google. Nếu ứng dụng của bạn sử dụng trường tìm kiếm có hoặc không có tính năng tự động hoàn thành, thì biểu trưng phải hiển thị cùng dòng.

Biểu trưng Google phải được đặt ở góc dưới cùng bên trái của bản đồ, còn thông tin ghi công phải được đặt ở góc dưới cùng bên phải. Cả hai đều phải được trình bày trên bản đồ dưới dạng một tổng thể chứ không được đặt bên dưới bản đồ hoặc một vị trí khác trong ứng dụng. Ví dụ về bản đồ sau đây cho thấy biểu trưng Google ở dưới cùng bên trái của bản đồ và thông tin ghi công ở dưới cùng bên phải.

Để sử dụng trên nền sáng	Để sử dụng trên nền tối

Tệp zip sau đây chứa biểu trưng Google ở kích thước chính xác cho các ứng dụng dành cho máy tính, Android và iOS. Bạn không được thay đổi kích thước hoặc sửa đổi các biểu trưng này theo bất kỳ cách nào.

Tải xuống: google_logo.zip

Đừng sửa đổi thuộc tính phân bổ. Không xoá, che khuất hoặc cắt bỏ thông tin phân bổ. Bạn không được sử dụng biểu trưng của Google cùng dòng (ví dụ: "Những bản đồ này là của [Google_logo]").

Giữ cho mô hình phân bổ gần nhau. Nếu sử dụng ảnh chụp màn hình của hình ảnh trên Google bên ngoài tính năng nhúng trực tiếp, hãy thêm thông tin ghi công tiêu chuẩn như xuất hiện trong hình ảnh. Nếu cần, bạn có thể tuỳ chỉnh kiểu và vị trí của văn bản ghi công, miễn là văn bản đó nằm gần nội dung và người xem hoặc người đọc thông thường có thể đọc được. Bạn không được di chuyển phần ghi công ra khỏi nội dung, chẳng hạn như ra cuối sách, phần ghi công của tệp hoặc chương trình hoặc chân trang của trang web.

Bao gồm nhà cung cấp dữ liệu bên thứ ba. Một số dữ liệu và hình ảnh trên các sản phẩm lập bản đồ của chúng tôi là của các nhà cung cấp khác ngoài Google. Nếu sử dụng hình ảnh như vậy, văn bản ghi công của bạn phải nêu tên "Google" và(các) nhà cung cấp dữ liệu có liên quan, chẳng hạn như "Dữ liệu bản đồ: Google, Maxar Technologies". Khi có nhà cung cấp dữ liệu bên thứ ba được trích dẫn cùng với hình ảnh, việc chỉ đưa vào "Google" hoặc biểu trưng của Google là không phù hợp.

Nếu bạn đang sử dụng Nền tảng Google Maps trên một thiết bị không thể hiển thị thông tin ghi công, vui lòng liên hệ với nhóm bán hàng của Google để thảo luận về các giấy phép phù hợp với trường hợp sử dụng của bạn.

Các yêu cầu khác về việc ghi công

Làm theo hướng dẫn này để truy xuất thông tin phân bổ của bên thứ ba và hiển thị thông tin phân bổ trong ứng dụng của bạn.

Truy xuất thông tin phân bổ từ một Địa điểm

Nếu ứng dụng của bạn hiển thị thông tin đánh giá thu được bằng cách gọi Place.fetchFields, thì ứng dụng đó cũng phải hiển thị thông tin phân bổ của bên thứ ba cho thông tin chi tiết về địa điểm đã thu được.

API trả về một đối tượng Place. Để truy xuất thông tin phân bổ từ đối tượng Place, hãy sử dụng thuộc tính Place.attributions. Thuộc tính này được trả về cùng với mọi yêu cầu (không cần chỉ định thuộc tính này bằng các trường). Thuộc tính này trả về một List của các đối tượng String hoặc null nếu không có thuộc tính nào để hiển thị. Mã ví dụ sau đây cho thấy cách lấy một địa điểm và liệt kê mọi giá trị phân bổ.

  // Use place ID to create a new Place instance.
  const place = new Place({
      id: 'ChIJB9a4Ifl744kRlpz0BQJzGQ8', // Crazy Good Kitchen
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location", "reviews"],
  });

  // Check for any place attributions.
  if (!place.attributions) {
      console.log('No attributions were found.');
      return;
  } else {
      // Log the place attribution
      for (var attribution of place.attributions) {
          console.log(attribution);
      }
  }

Hiển thị bài đánh giá

Một đối tượng Place có thể chứa tối đa 5 bài đánh giá, trong đó mỗi bài đánh giá được biểu thị bằng một đối tượng Review. Bạn có thể tuỳ ý hiển thị các bài đánh giá này trong ứng dụng của mình.

Khi hiển thị bài đánh giá do người dùng Google đóng góp, bạn phải đặt tên tác giả ở gần bài đánh giá đó. Nếu có trong trường ghi công tác giả của đối tượng Review, bạn nên thêm ảnh của tác giả và liên kết đến trang doanh nghiệp của họ. Hình ảnh sau đây là ví dụ về bài đánh giá một công viên:

Ví dụ sau đây cho thấy cách lấy một địa điểm, kiểm tra bài đánh giá và hiển thị dữ liệu từ bài đánh giá đầu tiên:

  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  });

  // Call fetchFields, passing "reviews" and other needed fields.
  await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location", "reviews"],
  });

  // If there are any reviews display the first one.
  if (!place.reviews) {
      console.log('No reviews were found.');
  } else {
      // Log the review count so we can see how many there are.
      console.log("REVIEW COUNT: " + place.reviews.length);

      // Get info for the first review.
      let reviewRating = place.reviews[0].rating;
      let reviewText = place.reviews[0].text;
      let authorName = place.reviews[0].authorAttribution.displayName;
      let authorUri = place.reviews[0].authorAttribution.uri;

      // Create a bit of HTML to add to the info window
      const contentString =
        '<div id="title"><b>' + place.displayName + '</b></div>' +
        '<div id="address">' + place.formattedAddress + '</div>' +
        '<a href="' + authorUri + '" target="_blank">Author: ' + authorName + '</a>' +
        '<div id="rating">Rating: ' + reviewRating + ' stars</div>' +
        '<div id="rating""><p>Review: ' + reviewText + '</p></div>';

      // Create an info window.
      infoWindow = new InfoWindow({
          content: contentString,
          ariaLabel: place.displayName,
      });

      // Add a marker for the place.
      const marker = new AdvancedMarkerElement({
          map,
          position: place.location,
          title: place.displayName,
      });

      // Show the info window.
      infoWindow.open({
          anchor: marker,
          map,
      });
  }

Xem tài liệu về bài đánh giá địa điểm.

Hiển thị thông tin ghi công cho một bức ảnh

Nếu ứng dụng của bạn hiển thị ảnh, bạn phải cho thấy thông tin ghi công tác giả cho mỗi ảnh có thông tin đó. Thông tin chi tiết về ảnh trong đối tượng Place của phản hồi được chứa trong mảng photos. Để thêm mảng photos vào phản hồi, hãy đưa trường dữ liệu photos vào yêu cầu.

Mỗi phần tử của mảng ảnh là một thực thể của Photo, chứa mảng authorAttributions thuộc loại AuthorAttribution. Các trường của đối tượng AuthorAttribution là các chuỗi chứa displayName, uri và photoUri của thuộc tính hoặc một chuỗi trống nếu không có thuộc tính nào để hiển thị.

Xem tài liệu về ảnh địa điểm.

Phân bổ kết quả tìm kiếm

Ở Châu Âu, khi sử dụng thứ hạng không bị can thiệp của Google, sản phẩm tìm kiếm phải có văn bản giải thích không cách quá 1 lượt nhấp, trong đó mô tả các yếu tố chính và trọng số của các yếu tố chính giúp xác định thứ hạng kết quả tìm kiếm. Văn bản giải thích:

Tiêu đề: Giới thiệu về những kết quả này

Nội dung: Khi bạn tìm kiếm doanh nghiệp hoặc địa điểm ở gần một vị trí, Google Maps sẽ hiển thị cho bạn kết quả tại địa phương. Một số yếu tố (chủ yếu là mức độ liên quan, khoảng cách và sự nổi bật) được kết hợp để giúp tìm ra kết quả phù hợp nhất cho nội dung tìm kiếm của bạn.

Nút 1: Tìm hiểu thêm
Nội dung"Tìm hiểu thêm" phải liên kết đến một bài viết trong Trung tâm trợ giúp.

Nút 2: OK

Nguyên tắc về kiểu cho mô hình phân bổ của Google

Sau đây là nguyên tắc về kiểu cho phần ghi công Google trong CSS và HTML nếu bạn không thể sử dụng biểu trưng Google có thể tải xuống.

Không gian trống

Khoảng không gian trống xung quanh phần khoá phải bằng hoặc lớn hơn chiều cao của chữ "G" trong Google.

Khoảng cách giữa nội dung ghi công và biểu trưng Google phải bằng một nửa chiều rộng của chữ "G".

Khả năng dễ đọc

Dòng giới thiệu phải luôn rõ ràng, dễ đọc và xuất hiện ở biến thể màu phù hợp với một nền nhất định. Luôn đảm bảo cung cấp đủ độ tương phản cho biến thể biểu trưng mà bạn chọn.

Màu

Sử dụng văn bản Google Material Gray 700 trên nền trắng hoặc sáng với độ đậm màu tối đa từ 0% đến 40%.

Google

#5F6368
RGB 95 99 104
HSL 213 5 39
HSB 213 9 41

Trên nền tối hơn, cũng như trên ảnh chụp hoặc các mẫu không rối mắt, hãy sử dụng văn bản màu trắng cho dòng giới thiệu và thông tin ghi công.

Google

#FFFFFF
RGB 255 255 255
HSL 0 0 100
HSB 0 0 100

Phông chữ

Sử dụng phông chữ Roboto.

Ví dụ về CSS

CSS sau đây, khi áp dụng cho văn bản "Google", sẽ hiển thị "Google" bằng phông chữ, màu sắc và khoảng cách phù hợp trên nền trắng hoặc sáng.

font-family: Roboto;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 16px;
padding: 16px;
letter-spacing: 0.0575em; /* 0.69px */
color: #5F6368;