Maps JavaScript API 政策

這個主題列出的註明出處相關規定,適用於所有使用 Maps JavaScript API 開發的應用程式,包括該 API 涵蓋的 Place Autocomplete 服務。如要瞭解更多的 Google 地圖平台條款,請參閱《Google 地圖平台服務條款》。

提供使用條款和隱私權政策

如果您使用 Maps JavaScript API 開發應用程式,請務必在應用程式中一併提供使用條款隱私權政策,且相關內容須符合您與 Google 雙方協議中載明的守則:

  • 使用條款和隱私權政策須設為公開。
  • 在應用程式的使用條款中,務必明確陳述使用應用程式時,使用者將受到 Google《服務條款》的約束。
  • 在隱私權政策中,務必告知使用者您目前使用 Google Maps API,並參照援引《Google 隱私權政策》。

適合顯示使用條款和隱私權政策的位置,取決於應用程式的平台。

行動應用程式

如果開發的是行動應用程式,建議您在上架商店的應用程式下載頁面,以及應用程式的設定選單中,提供使用條款和隱私權政策的連結。

網頁應用程式

如果開發的是網頁應用程式,建議您在網站頁尾提供使用條款和隱私權政策的連結。

預先擷取、快取或儲存內容

如果應用程式使用 Maps JavaScript API,則會受到您與 Google 雙方協議條款的約束。根據協議條款,除了已載述的少數情況,對於任何內容,一律不得預先擷取、建立索引、儲存或快取。

請注意,用於識別地點的地點 ID 不受快取限制的約束,Maps JavaScript API 回應中的「place_id」欄位會傳回地點 ID。若要瞭解如何儲存、重新整理及管理地點 ID,請參閱地點 ID 指南

顯示 Maps JavaScript API 結果

Maps JavaScript API 結果可以顯示於 Google 地圖,也可以不用地圖顯示。如要用地圖顯示 Maps JavaScript API 結果,只能在 Google 地圖顯示。Maps JavaScript API 資料不得用於 Google 地圖以外的地圖平台。

如果應用程式是在 Google 地圖上顯示資料,請務必附上 Google 標誌,而且不得修改。如果應用程式顯示 Google 資料時,與 Google 地圖在同一畫面,就不必進一步註明出處為 Google 的資訊。

如果應用程式顯示資料時,網頁或畫面上未一併顯示 Google 地圖,這些資料就須標註 Google 標誌。舉例來說,假使應用程式在一個分頁上顯示 Google 資料,在另一個分頁顯示含有這些資料的 Google 地圖,那麼第一個分頁就須顯示 Google 標誌。假如應用程式提供搜尋欄位 (不論是否使用自動完成功能),則欄位內都需要顯示這個標誌。

Google 標誌應置於地圖左下角,出處資訊則應放在右下角,兩者都要完整呈現在地圖上,不可出現在地圖下方或應用程式內的其他位置。在下列範例地圖中,Google 標誌位於地圖左下角,出處資訊則位於右下角。

政策出處資訊位置

以下 ZIP 檔案內含 Google 標誌,大小適用於電腦版、Android 版和 iOS 版應用程式。請勿調整或修改標誌大小。

下載檔案:google_logo.zip

請勿修改出處資訊,亦請勿移除、遮蓋或裁掉這些資訊。您不得內嵌 Google 標誌 (例如「這些地圖來自 [Google_logo]」)。

確保出處資訊靠近內容。如果不是用直接嵌入的方式加入 Google 圖像螢幕截圖,則標註的標準出處資訊應與該圖片顯示的相同。必要時,您可以自訂出處資訊文字的樣式和位置,只要把握基本原則,確保文字靠近內容,且能讓一般觀眾/讀者清楚易懂即可。請不要將出處資訊移到內容區域以外的位置,例如放到書尾、檔案或節目的製作/演出人員名單,或是網站頁尾。

附上第三方資料供應商資訊。Google 地圖產品的部分資料和圖片來自 Google 以外的供應商。如要使用這類圖像,出處資訊中須提及「Google」及相關資料供應商的名稱,例如「地圖資料:Google、Maxar Technologies」。如果圖像中提到第三方資料供應商,則出處資訊不應只標註「Google」或 Google 標誌。

如果要使用 Google 地圖平台的裝置,實際上不適合顯示出處資訊,請聯絡 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 資料欄位。

相片陣列的每個元素都是 Photo 的執行個體,內含 AuthorAttribution 類型的 authorAttributions 陣列。AuthorAttribution 物件的欄位是包含出處資訊 displayNameuriphotoUri 的字串,或是空白字串 (如果沒有任何可顯示的出處資訊)。

Google 出處資訊樣式守則

如果您無法使用可下載的 Google 標誌,請遵循下列樣式守則,以 CSS 和 HTML 加入 Google 出處資訊。

淨空空間

鎖定圖文標誌周圍的淨空空間大小,應等同或超過 Google 中「G」的高度。

出處資訊與 Google 標誌的間隔應為「G」寬度的一半。

易讀性

確保署名清楚易讀,且署名顏色應配合背景而調整。採用的標誌版本配色上須有足夠的對比。

顏色

如果是白色或淺色背景,文字顏色使用 Google 礦石灰 700,黑色色調最高介於 0% 到 40%。

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

如果是深色背景,且為攝影相片或素面花樣,請使用白色文字標註署名和出處資訊。

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

字型

請使用 Roboto 字型。

CSS 範例

將下列 CSS 套用至「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;