このトピックでは、Maps JavaScript API（その API の一部である Place Autocomplete サービスを含む）で開発されるすべてのアプリケーションにおける帰属表示に関する要件について説明します。Google Maps Platform のその他の用語については、Google Maps Platform 利用規約をご覧ください。
利用規約とプライバシー ポリシーを明示する
Maps JavaScript API アプリケーションを開発する場合は、Google との契約に定められている次のガイドラインに準拠した利用規約とプライバシー ポリシーをアプリケーションとともに公開する必要があります。
- 利用規約とプライバシー ポリシーは一般公開されていること。
- アプリケーションの利用規約に、当該アプリケーションを使用するユーザーには Google の利用規約が適用される旨が明示的に記載されていること。
- プライバシー ポリシーで、Google Maps API を使用していることをユーザーに伝え、参照として Google プライバシー ポリシーを組み込んでいること。
利用規約とプライバシー ポリシーをどこに組み込むべきかは、アプリケーションのプラットフォームによって異なります。
モバイルアプリ
モバイルアプリを作成している場合は、利用規約とプライバシー ポリシーのリンクを、関連するアプリストアのダウンロード ページとアプリの設定メニューに組み込むことをおすすめします。
ウェブ アプリケーション
ウェブ アプリケーションを作成している場合は、利用規約とプライバシー ポリシーへのリンクをウェブサイトのフッターに組み込むことをおすすめします。
コンテンツのプリフェッチ、キャッシュ保存、保存
Maps JavaScript API を使用するアプリケーションには、Google との契約条件が適用されます。本契約の条項に従い、コンテンツのプリフェッチ、インデックス登録、保存、キャッシュ保存は認められません（例外: 規約に記載されている限定的条件下）。
ただし、プレイスを一意に識別するために使用されるプレイス ID は、キャッシング制限の適用対象外のため、Maps JavaScript API のレスポンスの「place_id」フィールドで返されます。プレイス ID を保存、更新、管理する方法については、プレイス ID のガイドをご覧ください。
Maps JavaScript API の結果を表示する
Maps JavaScript API の結果は、Google マップで表示するか地図に表示せずに確認できます。Maps JavaScript API の結果を地図に表示する場合は、Google マップに表示する必要があります。Google マップ以外の地図で Maps JavaScript API のデータを使用することは禁止されています。
Google のロゴと帰属を表示する
アプリケーションで Google マップにデータを表示する場合は、Google ロゴが表示されますが、それに変更を加えることは禁止されています。Google マップと同じ画面に Google データを表示するアプリケーションでは、Google に対するそれ以上の帰属表示は不要です。
データを Google マップなしでページまたはビューに表示するアプリケーションでは、データとともに Google ロゴを表示する必要があります。たとえば、あるタブに Google のデータを表示し、別のタブにそのデータと Google マップを表示するアプリケーションであれば、最初のタブに Google ロゴを表示する必要があります。アプリケーションで、オートコンプリートの有無にかかわらず検索フィールドを使用する場合、ロゴをその同じ行かそのすぐ側に表示する必要があります。
Google のロゴは地図の左下に配置し、帰属表示は右下に配置します。どちらも地図の下やアプリケーション内の別の場所ではなく、全体が地図内に表示されるようにしてください。次の地図の例では、地図の左下に Google のロゴ、右下に帰属表示が配置されています。
| 明るい背景向け | 暗い背景向け |
|---|---|
|
|
次の zip ファイルには、パソコン版、Android 版、iOS 版の各アプリケーションに適したサイズの Google ロゴが収められています。いかなる方法でも、ロゴのサイズを変更したり、ロゴに変更を加えたりすることはできません。
ダウンロード: google_logo.zip
帰属に変更を加えないでください。帰属情報を削除したり、隠したり、切り抜いたりしないでください。Google ロゴを文章の中（例: 「これらの地図は [Google_logo] に属します」）で使用することはできません。
帰属表示は近くで行う。直接埋め込み以外で Google 画像のスクリーンショットを使用する場合は、画像に表示される標準の帰属情報を含めます。帰属表示の文言は、必要に応じてスタイルと配置場所をカスタマイズできます。ただし、文言がコンテンツと近く、平均的な閲覧者や読者が判読できる必要があります。帰属表示をコンテンツから離すこと（書籍の巻末、ファイルや番組のクレジット、ウェブサイトのフッターなど）はできません。
第三者データ プロバイダ名を含めます。Google のマッピング サービスのデータと画像の中には、Google 以外のプロバイダから提供されているものがあります。このような画像を使用する場合、帰属情報の文言には「Google」の名称と関連するデータ プロバイダ名（「地図データ: Google, Maxar Technologies」など）を記載する必要があります。画像に第三者データ プロバイダ名が表示されている場合、「Google」または Google ロゴのみを表示しただけでは帰属表示として適切ではありません。
帰属表示が現実に行えないデバイスで Google Maps Platform を使用している場合は、Google セールスチームにお問い合わせのうえ、ユースケースに適したライセンスについてご相談ください。
帰属表示に関するその他の要件
サードパーティの帰属表示を取得し、アプリに帰属表示を配置する手順は次のとおりです。
プレイスから帰属表示を取得する
Place.fetchFields を呼び出して取得したクチコミ情報を表示する場合、取得したプレイスの詳細に関するサードパーティ帰属もアプリに表示する必要があります。
API により Place オブジェクトが返されます。Place オブジェクトから帰属表示を取得するには、Place.attributions プロパティを使用します。このプロパティはすべてのリクエストとともに返されます（フィールドで指定する必要はありません）。このプロパティにより、String オブジェクトの List が返されます。表示する帰属表示がない場合は null が返されます。次のサンプルコードは、プレイスを取得し、帰属をリストする方法を示しています。
// 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);
}
}
クチコミを表示する
Place オブジェクトには最大 5 つのクチコミを含めることができ、各クチコミは Review オブジェクトで表されます。アプリでのクチコミ表示は省略可です。
Google ユーザーが投稿したクチコミを表示する場合は、投稿者の名前を近くに配置する必要があります。Review オブジェクトの投稿者帰属フィールドから取得できる場合は、投稿者の写真とプロフィールへのリンクも含めることをおすすめします。次の図は、公園のクチコミの例を示しています。
次の例は、プレイスの取得、クチコミの確認、最初のクチコミのデータの表示を行う方法を示しています。
// 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,
});
}
写真の帰属を表示する
アプリに写真を表示する場合は、各写真の所有者の帰属を表示する必要があります。レスポンスの Place オブジェクト内の写真に関する詳細は、photos 配列に含まれます。photos 配列をレスポンスに追加するには、リクエストに photos データ フィールドを含めます。
photos 配列の各要素は Photo のインスタンスです。この中には AuthorAttribution 型の authorAttributions 配列が含まれます。AuthorAttribution オブジェクトのフィールドは、帰属の displayName、uri、photoUri を含む文字列です。表示する帰属がない場合は空の文字列となります。
Google 帰属のスタイル ガイドライン
以下は、ダウンロード可能な Google ロゴを使用できない場合の、CSS と HTML の Google 帰属表示のスタイル ガイドラインです。
クリアスペース
ロックアップ周りのクリアスペースは、Google の「G」の高さを最小サイズとして設定してください。
帰属情報のコピーと Google ロゴの間のスペースは、「G」の幅の半分にします。
判読しやすさ
バイラインは常に、はっきりと見やすく、背景色に適した色で表示する必要があります。選択したバリエーションのロゴに十分なコントラストを付けてください。
色
白または明るい色の背景では、黒の色合い（0～40%）の Google Material Gray 700 テキストを使用します。
#5F6368 RGB 95 99 104 HSL 213 5 39 HSB 213 9 41
背景が暗く、写真またはシンプルな図柄の上には、バイラインと帰属に白いテキストを使用します。
#FFFFFF RGB 255 255 255 HSL 0 0 100 HSB 0 0 100
フォント
Roboto フォントを使用します。
CSS の例
次の CSS を「Google」のテキストに適用すると、白または明るい背景に「Google」が適切なフォント、色、間隔でレンダリングされます。
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;