一切就绪!

着手开发前,请先阅读我们的开发者文档

激活 Google Maps JavaScript API

为帮助您起步,我们将引导您在 Google Developers Console 中先完成几项任务:

  1. 创建或选择项目
  2. 激活 Google Maps JavaScript API 及相关服务
  3. 创建相应密钥
继续

已登录地图

当您通过 Google Maps JavaScript API 启用登录时,您网站上的地图将为用户量身定制。登录 Google 帐户的用户将可保存地点,以供稍后在 Web 或移动设备上查看。从地图保存的地点可归因于您的网站或应用。

概览

您的网站的每一位访客都会看到专为其量身定制的 Google 地图。如果他们使用 Google 帐户登录,则其查看的地图上将会直接嵌入他们保存的地点、住宅和办公位置以及其他内容。此外,这还意味着与地图的交互(如为位置添加星标)将得到保存,以方便在桌面版或移动版 Google 地图以及用户在 Web 上访问的任何其他 Google 地图中进行查看。

这些用户专属详情只对已登录用户可见;对您的应用的其他用户不可见,也无法通过 API 进行访问。以下是一个已登录地图的示例。您应该会在地图的右上角看到一个 Google 登录框或您的 Google 头像。

请参阅完整代码示例

启用登录

如需在通过 Google Maps JavaScript API 创建的地图上启用登录,请加载 v3.18 或更高版本 API 以及附加的 signed_in=true 参数。

<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 地图上保存地点,帮助他们记忆对其最为重要的位置。保存的地点将出现在该用户在 Web 或移动设备上查看的其他 Google 地图中。当用户从 SaveWidgetInfoWindow 保存地点时,您可以加入个性化的提供方说明和返回应用的链接。

您可以通过以下两种方式启用归因保存功能:

  • 向某个标记添加 place 信息,以允许从锚定于该 MarkerInfoWindow 保存地点
  • 创建一个自定义 SaveWidget

稍后可通过在地图上选择保存的地点来访问地点。

通过信息窗口保存到 Google 地图

向某个标记添加有关地点的信息,以在默认信息窗口上启用 Save to Google Maps 控件。该控件将自动添加到任何与该标记关联的信息窗口。作为可选步骤,您可以将保存归因于您的应用,以帮助用户记忆原始来源。

如需启用从信息窗口保存到 Google 地图:

  1. 新建一个 Marker
  2. MarkerOptions 中,指定 map 属性、place 属性和 attribution 属性。请注意,如果提供了 place,则不需要 position
  3. place 对象中,指定一个 location 和下列项之一:
    • placeId,用于对地点进行唯一标识。详细了解如何通过地点 ID 引用地点
    • query 字符串,用于搜索 location 附近的地点。搜索字符串应尽可能具体。例如:'stanley park vancouver bc canada'
  4. attribution 对象中,指定:
    • 保存的 source。通常是您的网站或应用的名称。
    • 一个以返回您的网站的链接形式提供的可选 webUrl
    • 一个以 URL 架构形式指定的可选 iosDeepLinkId,在 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. 向某个包含 Google 地图的页面添加一个 div
  2. 通过标记指示要保存的地点,以便您的用户清楚他们要保存的地点。
  3. 创建一个 SaveWidgetOptions 对象,其中包括一个 placeattribution 对象字面量。
  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
需要帮助?请访问我们的支持页面