このページは Cloud Translation API によって翻訳されました。

高度なマーカーと Firebase を使用してリアルタイムで顧客にアプローチ

Google Maps Platform では、高度なマーカーを使用して地図上のマーカーのビジュアルデザインをカスタマイズすることで、独自のエクスペリエンスを創出できます。このドキュメントでは、お客様がさらに一歩進め、リアルタイムデータに基づいて動的に変化するマーカーを作成する方法について説明します。

ヒーロー画像には、サンフランシスコを中心とした Google マップ JS 地図が表示されています。場所によっては、「2 分」、「4 分」という内容のカラフルなマーカーが表示されます。

地図上のマーカーは、ユーザーに充実した地図体験を提供できる便利なツールです。サイズ、色、形などのマーカー属性を使用すると、マークされた各場所に関する追加情報を伝えることができます。場合によっては、この追加情報は動的に変更され、デベロッパーはユーザーに対する鮮度を維持しながら地図の可視化を更新したいと考えるかもしれません。

この記事では、説明のために例を使用します。ある小売チェーンが、マップを使用して店舗の待ち時間をユーザーに提示するとします。ただし、この同じアーキテクチャは他の多くのユースケースにも使用できます。その他に、次のようなアイデアがあります。

ホテルの空室状況: ホテルの検索結果を示す地図に表示される空室状況の鮮度は、在庫が減り、ユーザーにホテルの予約を促す重要なシグナルです。
駐車スペースの空き状況: 駐車場の地図で、到着時に駐車スペースを確保できる目的地をユーザーが安心して選択できるようにします。
レストランの営業中、閉店中、閉業: レストランの検索結果を示す地図では、到着時にレストランが閉まっている可能性があることをユーザーが認識していることが重要です。

Dynamic Advanced Markers ソリューション

では、高度なマーカーを使用して動的データを可視化する地図の作成手順について見ていきましょう。前述のように、このユースケースは、購入手続きのキュー管理システムを利用してユーザーの待ち時間を推定し、可視化する小売チェーンです。アプリケーションアーキテクチャは次のとおりです。

アーキテクチャ図は、ウェブアプリケーションにアクセスするユーザーを示しています。ウェブアプリケーションの Google インフラストラクチャ（GMP と Firebase Cloud Functions）。Firebase Cloud Functions は、お客様のバックエンドからのライブデータにアクセスします。

ステップ 1 - 視覚的エクスペリエンスを定義する属性を決定する

まず、ユーザーに表示する 1 つ以上のビジネスプロパティを決定します。ここでは、1 つのプロパティのみを表示します。各店舗における現在の待ち時間（分単位）です。

次のステップでは、対応するマーカー属性を 1 つ以上選択し、地図上のマーカーの待ち時間に視覚的にアノテーションを付けます。マーカー属性のリストは、PinElement の仕様ですぐに利用できます。また、より豊富なカスタマイズオプションとして、カスタム HTML を使用することもできます。

この例では、2 つのマーカー属性を使用して待ち時間データを可視化します。

マーカーの色: 待ち時間が 5 分未満の場合は青色、5 分を超える場合は黄色
マーカーコンテンツ（カスタム HTML マーカーが必要）: 現在の待機時間を分単位でマーカー自体に含めます。

ステップ 2 - リアルタイムデータソースへの接続を構成する

データソースに接続する方法は複数あり、適切なソリューションはユースケースと技術インフラストラクチャによって異なります。この例では、pull アプローチを採用し、HTTP リクエスト（REST）経由で最新の待ち時間データを定期的にリクエストしています。以降のセクションでは、push アプローチを活用した代替アーキテクチャについて説明します。

アプリケーションがサーバーからの待ち時間のデータにアクセスできるようにするため、このアーキテクチャでは Cloud Functions for Firebase を利用しています。Cloud Functions では、このデータにアクセスして計算するためのバックエンド関数を定義できます。また、ウェブアプリケーションに Firebase ライブラリを含め、HTTP リクエストを介して Cloud Functions の関数にアクセスできるようにしています。

次のステップは、ユーザーのデータを常に最新の状態に保つことです。そのためには、JavaScript の setInterval 関数を使用してタイマーを設定し、タイムアウトを 30 秒に設定します。タイマーがトリガーされるたびに、上記のように更新された待機時間データをリクエストします。新しいデータを取得したら、地図上のマーカーの外観を更新する必要があります。次のステップでは、これらの変更を行う方法について詳しく説明します。

ステップ 3 - 地図上のマーカーをレンダリングする

高度なマーカーを使用して、スタイル化されたマーカーを地図上にレンダリングできるようになりました。高度なマーカーは、Google Maps Platform の Maps JavaScript API で作成された地図にレンダリングできます。高度なマーカーを使用する場合は、JS の地図リクエストに Map ID パラメータを含めてください。

以下のコードスニペットでは、マーカーを作成し、HTML div 要素を作成してマーカーのコンテンツを定義しています。

// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");

// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
      map,
      position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
      content: storeWaitLabels[store_index]
    }));

最後に、各店舗のマーカーテキストと CSS スタイルを更新します。以下のコードは、更新された待機時間データを読み取り、待機時間に基づいて各店舗ピンにスタイル設定を割り当てます。

// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
     if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
     else storeWaitLabels[store_index].className = "wait-under-5";

マップは既存の待ち時間 API を使用して、ユーザーの最新の待ち時間を可視化するようになりました。

リアルタイムデータソースに接続する別の方法

リアルタイムのデータソースに接続するには、さまざまな方法があります。以下では、Firebase Cloud Messaging と WebSocket という 2 つの代替オプションについて説明します。どのアプローチを採用する場合でも、地図ツールのパフォーマンスを維持できるよう、以下の要素について検討してください。

更新の頻度
データのボリューム
地図表示内のマーカーの数
ハードウェアとブラウザの機能

Firebase Cloud Messaging

Firebase Cloud Messaging は push アプローチです。この方法を使用すると、バックエンドで待機時間のデータが更新されるたびに、地図アプリケーションに更新情報を送信します。更新メッセージは、マーカーの外観とコンテンツの更新を目的としたコールバック関数をトリガーします。

このアーキテクチャを選択する前に考慮すべき 1 つの点は、地図アプリケーションを実行するブラウザごとに、永続的なサーバー接続を維持する必要があるということです。そのため、実行コストが高くなり、接続の問題において堅牢性が低くなる可能性があります。

WebSockets

WebSockets は、データを最新の状態に保つための push ベースのアプローチです。前のシナリオと同様に、WebSocket を使用してバックエンドとマップアプリケーションの間に永続的な接続を確立できます。このアプローチの機能的メリットは本質的に Firebase Cloud Messaging と似ていますが、必要なインフラストラクチャを構成するために追加の作業が必要になることがあります。

おわりに

デベロッパーは、リアルタイムのデータソースと高度なマーカーを組み合わせて、Google マップで直感的に視覚化できます。これらのデータソースを接続する方法は、地図の要件、ユーザーのハードウェアとブラウザ、データ量に応じて異なります。統合されたデータを使用して、高度なマーカーのデザインをリアルタイムで制御し、ユーザーに動的なエクスペリエンスを提供できます。

次のアクション

協力者

主任執筆者:

Jim Leflar | Google Maps Platform ソリューションエンジニア

John Branigan | Google Cloud Platform シニアカスタマーエンジニア

Steve Barrett | Google Maps Platform ソリューションエンジニア