以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

サインインしたマップ

Google Maps JavaScript API でサインインを有効にすると、サイト上のマップは、各ユーザーに合わせて作成されます。自分の Google アカウントにサインインしたユーザーは、プレイスを保存して、後でウェブまたはモバイル端末で表示させることができます。マップから保存されたプレイスは、サイトまたはアプリと関連付けることができます。

概要

サイトの各訪問者にはその訪問者に合わせて作成された Google マップが表示されます。訪問者が Google アカウントを使用してサインインする場合は、表示されるマップに、保存したプレイス、自宅、職場などが組み込まれます。これは、ある地点に星印を付けるなどのマップでの操作が保存され、デスクトップやモバイル端末の Google マップや、ユーザーがウェブ上で訪問するその他の任意の 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 マップ上に保存できるようにして、ユーザーにとって最も重要である場所を忘れないようにします。保存したプレイスは、ウェブやモバイル端末の別の Google マップで表示できます。ユーザーがプレイスを SaveWidget または InfoWindow から保存するときに、パーソナライズされた関連事項やアプリに戻るリンクを含めることができます。

この関連付け保存機能は、次の 2 つの方法で有効化できます。

  • place 情報をマーカーに追加して、この Marker に紐づけられている InfoWindow からの保存を可能にします。
  • カスタムの SaveWidget を作成します。

後でマップ上に保存されたプレイスを選択することで、プレイスにアクセスできます。

情報ウィンドウを使用して Google マップに保存する

プレイスに関する情報をマーカーに追加すると、デフォルトの情報ウィンドウで [Save to Google Map] コントロールを有効化できます。このコントロールは、該当するマーカーに関連付けられているすべての情報ウィンドウに自動的に追加されます。オプションで、保存とアプリを関連付けて、ユーザーが保存元ソースを忘れないようにすることができます。

情報ウィンドウから Google マップへの保存を有効化するには、次の手順に従います。

  1. 新しい Marker を作成します。
  2. MarkerOptions で、mapplace および attribution の各プロパティを指定します。place が指定されている場合は position は必要ありません。
  3. place オブジェクトで、location と次のいずれかを指定します。
    • プレイスを一意に識別する placeId。詳細は、プレイス ID を使用したプレイスの参照をご覧ください。
    • location 周辺のプレイスを検索する query 文字列。検索文字列は、できるだけ具体的にする必要があります。たとえば、'stanley park vancouver bc canada' のように指定します。
  4. attribution オブジェクトに、次の項目を指定します。
    • 保存の source(ソース)。通常、これはサイトやアプリの名前です。
    • サイトに戻るリンクとして含める webUrl(オプション)。
    • iOS で表示したときに webUrl の代わりに表示する iosDeepLinkId(オプション)。URL スキームとして指定します。
  5. 新しい InfoWindow を作成します。
  6. Marker がクリックされたときに InfoWindow を開くためのイベントリスナを追加します。

これにより、マーカーがクリックされたときに [Save to Google Maps] オプションが有効になります。

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. place および attribution オブジェクト リテラルを含む 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
ご不明な点がありましたら、Google のサポートページをご覧ください。