Chủ đề này đưa ra các yêu cầu phân bổ cho tất cả ứng dụng được phát triển bằng API JavaScript của Maps, bao gồm cả dịch vụ Tự động hoàn thành địa điểm nằm trong 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 Maps JavaScript API, bạn phải cung cấp Điều khoản sử dụng và Chính sách quyền riêng tư với ứng dụng của mình. Chính sách này đá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 cung cấp 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 chịu sự ràng buộc của Điều khoản dịch vụ của Google.
- Trong Chính sách quyền riêng tư, bạn phải thông báo cho người dùng rằng bạn đang sử dụng(các) API Google Maps và đưa vào bằng cách tham khảo Chính sách quyền riêng tư của Google.
Địa điểm bạn nên cung cấp Điều khoản sử dụng và Chính sách quyền riêng tư 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 một ứng dụng dành cho thiết bị 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 liên quan và trong trình đơn cài đặt ứng dụng.
Ứng dụng web
Nếu đang phát triển một ứng dụng web, bạn nên cung cấp một đườ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 của bạn.
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 Maps JavaScript API chịu sự ràng buộc của các điều khoản trong Thoả thuận của bạn với Google. Theo các điều khoản trong Thoả thuận của bạ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ừ các điều kiện giới hạn được nêu trong điều khoản.
Xin lưu ý rằng mã địa điểm (dùng để xác định riêng một địa điểm) sẽ được miễn hạn chế 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 JavaScript Maps. 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 API Maps JavaScript
Bạn có thể hiển thị kết quả API Maps JavaScript trên Google Maps hoặc không cần bản đồ. Nếu bạn muốn hiển thị kết quả API JavaScript của Maps trên bản đồ, thì những kết quả này phải được hiển thị trên Google Maps. Nghiêm cấm sử dụng dữ liệu API Maps JavaScript trên một bản đồ không phải là bản đồ của Google.
Hiển thị biểu trưng của Google và thông tin ghi công
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ẽ được đưa vào 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ột màn hình với Google Maps không bắt buộc phải cung cấp thêm dữ liệu 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 chế độ xem không hiển thị cả Google Map, thì bạn phải hiển thị biểu trưng của 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 chứa 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 các 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 của Google nên được đặt ở góc dưới cùng bên trái của bản đồ, đồng thời thông tin ghi công được đặt ở góc dưới cùng bên phải, cả hai đều phải hiển thị trên bản đồ một cách tổng thể và không nằm dưới bản đồ hay một vị trí khác trong ứng dụng. Ví dụ về bản đồ sau đây cho thấy biểu trưng của Google ở phía dưới bên trái của bản đồ và thuộc tính ở phía dưới 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 đổ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. Đừng xoá, che khuất hoặc cắt thông tin thuộc tính. Bạn không thể sử dụng biểu trưng của Google cùng dòng (ví dụ: "Các bản đồ này đến từ [Google_logo]").
Luôn phân bổ theo cách phù hợp. Nếu bạn sử dụng ảnh chụp màn hình hình ảnh trên Google bên ngoài video được nhúng trực tiếp, hãy cung cấp thông tin ghi nhận tác giả 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 đó ở gần nội dung và có thể đọc được đối với người xem hoặc người đọc thông thường. Bạn không được di chuyển thuộc tính ra khỏi nội dung, chẳng hạn như đến cuối sách, ghi công của tệp hoặc chương trình hoặc chân trang web của bạn.
Bao gồm cả 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ông phải Google. Nếu bạn sử dụng những hình ảnh như vậy, văn bản ghi công của bạn phải có 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 nhà cung cấp dữ liệu bên thứ ba được trích dẫn cùng với hình ảnh mà chỉ chứa "Google" hoặc biểu trưng Google là không đúng.
Nếu bạn đang sử dụng Nền tảng Google Maps trên một thiết bị không phù hợp để hiển thị thuộc tính, 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
Hãy làm theo các hướng dẫn này để truy xuất các thuộc tính của bên thứ ba và hiển thị các thuộc tính đó trong ứng dụng của bạn.
Truy xuất các thuộc tính từ một địa điểm
Nếu cho thấy thông tin đánh giá thu thập được bằng cách gọi Place.fetchFields, thì cũng phải hiện thông tin thuộc tính 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 các thuộc tính từ đối tượng Place, hãy sử dụng thuộc tính Place.attributions. Thuộc tính này sẽ được trả về 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 sẽ trả về List gồm 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 việc nhận một địa điểm và liệt kê mọi thuộc tính.
// 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ỳ ý cho hiện những bài đánh giá này trong ứng dụng của mình.
Khi hiển thị các 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 nhau. Nếu có trong trường ghi công tác giả của đối tượng Review, bạn nên bao gồm ảnh của tác giả cũng như đường liên kết đến hồ sơ của họ. Sau đây là hình ảnh minh hoạ một bài đánh giá về một công viên:
Ví dụ sau đây cho thấy hoạt động tìm một địa điểm, kiểm tra bài đánh giá và hiện dữ liệu của bài đánh giá đầu tiên:
// Use place ID to create a new Place instance.
const place = new Place({
id: 'ChIJB9a4Ifl744kRlpz0BQJzGQ8', // Crazy Good Kitchen, 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,
});
}
Hiển thị thông tin ghi nhận sự đóng góp cho một ảnh
Nếu ứng dụng của bạn hiển thị ảnh, bạn phải hiển thị thông tin ghi nhận tác giả cho mỗi ảnh có ảnh đó.
Thông tin chi tiết về ảnh trong đối tượng Place của phản hồi có 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ị.
Nguyên tắc về kiểu cho mô hình phân bổ của Google
Dưới đây là nguyên tắc về kiểu cho các thuộc tính của 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 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 bản sao thuộc tính và biểu trưng Google phải bằng một nửa chiều rộng của chữ "G".
Độ dễ đọc
Dòng tên tác giả phải luôn rõ ràng, dễ đọc và hiển thị với nhiều biến thể màu sắc phù hợp với 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 phạm vi sắc thái đen tối đa là 0%– 40%.
#5F6368 RGB 95 99 104 HSL 213 5 39 HSB 213 9 41
Trên nền tối hơn và trên ảnh chụp hoặc các mẫu không bận, hãy sử dụng văn bản màu trắng cho dòng ghi tên tác giả và ghi công.
#FFFFFF RGB 255 255 255 HSL 0 0 100 HSB 0 0 100
Phông chữ
Hãy sử dụng phông chữ Roboto.
Ví dụ về CSS
Khi được áp dụng cho văn bản "Google", CSS sau đây sẽ hiển thị "Google" với phông chữ, màu sắc và khoảng cách thích 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;