您已全部設定完成!

若要開始開發,請參閱我們的開發人員文件

啟用 Google Maps JavaScript API

為協助您開始,我們將先引導您使用「Google 開發人員控制台」來執行一些動作:

  1. 建立或選擇專案
  2. 啟用 Google Maps JavaScript API 與相關服務
  3. 建立適當的金鑰
繼續

登入地圖

當您使用 Google Maps JavaScript API 啟用登入功能時,您網站上的地圖將能夠針對您的使用者量身訂做。已登入自己 Google 帳戶的使用者將能儲存地點,以便之後在網頁或行動裝置上檢視。從地圖儲存的地點會標示為在您的網站或應用程式中所建立。

總覽

您網站的每位訪客都會看到為他們量身訂做的「Google 地圖」。如果以 Google 帳戶登入,他們儲存的地點、住家與公司的位置等都會建置在所見的地圖中。這也表示會儲存與地圖的互動(例如用星號標出位置),以便在電腦或行動裝置的「Google 地圖」中檢視,也可以在使用者於網路上瀏覽的任何其他「Google 地圖」中檢視。

這些使用者特定詳細資料只供已登入的使用者檢視,應用程式的其他使用者看不到這些詳細資料,也無法使用 API 存取這些詳細資料。以下是已登入地圖的範例。您應該會在地圖的右上方看到一個 Google 登入方塊,或是您的 Google 虛擬人偶。

請參閱完整的程式碼範例

啟用登入功能

如果要在使用 Google Maps JavaScript API 建立的地圖上啟用登入功能,請使用額外的 signed_in=true 參數載入 v3.18 或更新版本的 API。

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

您應該會在地圖的右上方看到一個 Google 登入方塊,或是您的 Google 虛擬人偶。

使用者可以按一下地圖右上方的登入控制項,使用自己的 Google 帳戶登入。如果使用者之前在不同的地方登入 Google,他們將會自動登入地圖。

儲存屬性

允許您的使用者儲存「Google 地圖」上的地點,協助他們記住對他們很重要的位置。該使用者在網頁或行動裝置瀏覽其他「Google 地圖」時,這些儲存的地點也會出現。當使用者從 SaveWidgetInfoWindow 儲存地點時,您可以包括個人化資料引用標示,並將之連回您的應用程式。

您可以透過兩種方式啟用儲存屬性功能:

  • 新增 place 資訊到標記,允許從錨定到這個 MarkerInfoWindow 儲存。
  • 建立自訂的 SaveWidget

地圖上儲存的地點可讓您稍後選取使用。

使用資訊視窗儲存到「Google 地圖」

新增有關地點的資訊到標記,以在預設資訊視窗上啟用 [儲存到 Google 地圖] 控制項。這個控制項會自動新增到與該標記關聯的任何資訊視窗。您可以選擇性地將該儲存連結至您的應用程式,來幫助使用者記住它的原始來源。

從資訊視窗啟用「儲存到 Google 地圖」的功能:

  1. 建立新的 Marker
  2. MarkerOptions 中,指定 mapplaceattribution 屬性。請注意,如果已提供 place,則不一定需要 position
  3. place 物件中,指定 location 和下列其中一項:
    • placeId,用來唯一識別地點。深入瞭解如何使用地點 ID 參照某個地點
    • query 字串,用來搜尋 location 附近的地點。搜尋的字串應儘可能保持明確。例如:'stanley park vancouver bc canada'
  4. attribution 物件中,指定:
    • 儲存的 source。通常是您網站或應用程式的名稱。
    • 選擇性的 webUrl,包括此項目以做為回到您網站的連結。
    • 選擇性的 iosDeepLinkId,指定為 URL 配置,並能在 iOS 作業系統上檢視時取代 webUrl 的位置。
  5. 建立新的 InfoWindow
  6. 新增事件接聽程式,以在按一下 Marker 時開啟 InfoWindow

這會在按一下標記時啟用 [儲存到 Google 地圖] 的選項。

以下是使用 query 字串搜尋位置的範例。

請參閱完整的程式碼範例

// [START script-body]
      // When you add a marker using a Place instead of a location, the Maps
      // API will automatically add a 'Save to Google Maps' link to any info
      // window associated with that marker.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958}
        });

        var marker = new google.maps.Marker({
          map: map,
          // Define the place with a location, and a query string.
          place: {
            location: {lat: -33.8666, lng: 151.1958},
            query: 'Google, Sydney, Australia'

          },
          // Attributions help users find your site again.
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
          content: 'Google Sydney'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
// [END script-body]

使用 SaveWidget 儲存到「Google 地圖」

您可以使用 SaveWidget 控制項,建立用於儲存地點的自訂 UI。使用 SaveWidget 時,您可以指定其他資料引用標示資料,這樣您的使用者就會記得他們所儲存地點的來源,也可以輕鬆地瀏覽回您的應用程式。

如果要將 SaveWidget 新增到您的應用程式,您需要執行下列動作。

  1. 新增 div 到包含「Google 地圖」的頁面。
  2. 指出要該地點將隨著標記儲存,這樣您的使用者就會知道他們所儲存的地點。
  3. 建立包括 placeattribution 物件常值的 SaveWidgetOptions 物件。
  4. 建立新的 SaveWidget 物件,傳遞 div 和您已新增的選項。

Google 雪梨辦公室之儲存小工具的範例顯示如下。在範例中,我們會在地圖畫布外面建立 div,然後使用 Google Maps JavaScript API 新增該 div 做為控制項。

請參閱完整的程式碼範例

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

傳送您對下列選項的寶貴意見...

這個網頁
Google Maps JavaScript API
Google Maps JavaScript API
需要協助嗎?請前往我們的支援網頁