サインインしたマップ

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 にサインイン済みの場合は、このマップに自動的にサインインされます。

マップ コントロールの変更点

バージョン 3.22 以降の API では、サインインの有効/無効に関係なくマップ コントロールは同じです。唯一の相違点は、サインインが有効化されている場合はサインイン コントロールが表示され、有効化されていない場合は表示されないことです。

バージョン 3.20 から 3.21 の API では、サインインが有効化されているかどうかによって、いくつかのコントロールのデフォルトの位置と外観が異なります。

コントロール サインイン有効(v3.20 ~ 3.21) サインイン無効(v3.20 ~ 3.21)
ズーム マップの右下隅に表示されます。マップのズームレベルを制御する +/- の 2 つのボタンが表示されます。 マップの左上隅に表示されます。マップのズームレベルを制御するスライダ(大きなマップの場合)または +/- の 2 つのボタン(小さなマップの場合)が表示されます。
パン デフォルトで無効化されています。マップの左上隅に表示されます。 マップの左上隅に表示されます。マップをパンするためのボタンが表示されます。パン コントロールでは、45° 画像の回転も可能です(利用可能な場合)。
MapType マップの左上隅に表示されます。ユーザーは、ROADMAPTERRAINSATELLITE および HYBRID の各マップタイプを切り替えることができます。コントロールは一連のボタンとして表示されます。 マップの右上隅に表示されます。ユーザーは、ROADMAPTERRAINSATELLITE および HYBRID の各マップタイプを切り替えることができます。コントロールは一連のボタンとして表示されます。
ストリート ビュー マップの右下隅のズーム コントロールの下に表示されます。 マップの左上隅に表示されます。ペグマン アイコンが表示され、このアイコンをマップにドラッグするとストリート ビューを表示できます。
回転 ズーム コントロールとストリート ビュー コントロールの間に表示されます。回転コントロールのデザインが変更されました。 マップの左上隅に表示されます。小さな円形のアイコンにより、45° 画像が含まれるマップを回転させることができます。

関連付け保存

ユーザーがプレイスを 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 文字列を使用して場所を検索する例を下に示します。

完全なサンプルコードを見る。

// 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);
  });
}

SaveWidget を使用して Google マップに保存する

SaveWidget コントロールを使用して、プレイスを保存するためのカスタム UI を作成します。SaveWidget を使用すると、追加属性データを指定できます。これにより、ユーザーはプレイスをどこから保存したのかを忘れないようにでき、また、アプリに簡単に戻れます。

アプリに SaveWidget を追加するには、以下の手順が必要です。

  1. div を、Google マップを含むページに追加します。
  2. 保存するプレイスをマーカーによって示します。これで、ユーザーは保存するプレイスを認識できるようになります。
  3. place および attribution オブジェクト リテラルを含む SaveWidgetOptions オブジェクトを作成します。
  4. 新しい SaveWidget オブジェクトを作成し、div および追加したオプションを渡します。

Google シドニー オフィスの保存ウィジェットの例を下に示します。この例では、マップ キャンバスの外側に div を作成し、Maps 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>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #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: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.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 src="https://maps.googleapis.com/maps/api/js?key=<var class="apiparam replaceable-credential">YOUR_API_KEY</var>&callback=initMap&signed_in=true" async defer>
    </script>
  </body>
</html>

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。