編集者注: 「Map Tips(Google Maps 開発の Tips)」では Google Maps APIs(英語)に関してよく聞かれる質問に応えています。今回は、Google Maps ソリューションアーキテクトである David McClusky が、Google Maps ツールを展開するために鍵となる情報を提供します。



今日では何百万という数のウェブサイトやアプリで Google Maps APIs が活用されています。これらのサイトやアプリ上で、ユーザーが自分の Google アカウントを使って Google Maps にログインすれば、自分に合わせてカスタマイズした Google Maps をアプリケーション上で表示させることができるのです。

まず、ユーザーがお気に入りに登録した場所(自宅や職場など)を Google Maps 上に表示させることができるようになります。また、店舗の位置情報などを含む独自のレイヤーデータをユーザーがお気に入りとして保存すれば、そのユーザーは他の環境(maps.google.com や Google Maps for Android/iOS など)で Google Maps を開いたときにも、同じ情報を見ることができるようになります。

たとえばあなたが旅行サイトを作っていて、ユーザーがホテルを探したり付近のアクティビティを調べられるようにしたいとします。そんなときもマップへのログインを有効にしておけば、ユーザーはあなたのサイトで見つけたホテル情報を自分の Google アカウントに保存することができるようになるのです。



その後、同じユーザーが maps.google.com や Google Maps Mobile でリサーチを継続した場合、そのユーザーが保存したホテル(マップ上に星マークで表示)があなたのサイトへのリンクと共に表示されます。

最初のステップ

やり方は簡単です。まずは Google Maps JavaScript API で作成したマップで、ログインを有効にします。これは「signed_in=true」という一文を追加して JavaScript API に読み込ませることで可能になります。

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
Google Maps JavaScript API でログインを有効にすると、ユーザーは自分が保存した場所などを含む、自分用にカスタマイズしたマップを見ることができるようになります。下の写真のように、画面の右上にはユーザーの Google プロフィールの写真が表示されます(Google アカウントでログイン時)。


次は Google Maps JavaScript API の「Attributed Save(帰属保存)」機能を使うことで、ユーザーが自分にとって重要な場所を保存し、思い出せるようにします。これにより、ユーザーが他の環境で Google Maps を見た際にも、保存された情報が表示されるようになります。

これを実行するための最も簡単な方法は、マーカーを作成してマップに追加する際に、プレイスと「attribution」に関するプロパティを「MakerOptions」オブジェクトに追加することです。
var marker = new google.maps.Marker({
    map: map,
    //ロケーションとクエリーストリングによってプレイスを定義。
    place: {
      location: {lat: 40.739929, lng: -74.005792},
      query: Gansevoort Meatpacking NYC, New York, NY
    },
    //「Attribution」によってユーザーが自分のサイトを再び訪れられるようにする。
    attribution: {
      source: 'Altostrat Hotels',
      webUrl: 'https://developers.google.com/maps/'
    }
  });
ロケーションとクエリーストリングによってプレイスのプロパティを追加することで、あなたの作成したマーカーを Google のデータベースにある特定の POI(point of interest)と関連づけることができます。また「Attribution」フィールドによって、ユーザーがマップに保存した情報を他の環境で見る際にも、リンクをたどってあなたのサイトに戻ることができるようになります。ただし「Attributed Save」を可能にするには、その場所が Google のデータベースに登録されている(会社の名前またはアドレスによって)必要があります。こちら(英語)で実行可能なコードのサンプルを見ることができます。

ヒントとテクニック

これらはGoogle Maps JavaScript API を使ったマップへのログインを最大限に活用するためのヒントとなります。

マーカーと関連付けるためにプレイスを特定する際は、クエリーストリングよりもプレイス ID を使うほうが効果的です。プレイス ID を使ってプレイスを参照する方法の詳細はこちら(英語)をお読みください。
マーカーをマップに追加する際は忘れずに「Attribution」を追加するようにしましょう。そうすることでユーザーがマップに登録したお気に入りの場所を他の環境で見ている際も、リンクをたどってあなたのサイトを訪れることができるようになります。

マップ上に表示させているマーカーがひとつだけの場合は、SaveWidget(英語)を使うことでロケーションをカスタマイズした形で効果的に表示することができます。

関連情報

マップへのログインをウェブサイトに組み込むことはできたでしょうか?マップへのログインと「Attributed Save」を組み込むための詳細は、以下のガイド(英語)をご覧ください。