Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Firebase を使用したリアルタイムマーカー

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

ヒーロー画像には、サンフランシスコを中心とした Google Maps JS の地図が表示されています。いくつかの場所には、「2 分」や「4 分」と表示されたカラフルなマーカーが表示されています。色とコンテンツは時間の経過とともに更新されます。

地図マーカーは、ユーザーに充実した地図エクスペリエンスを提供するのに役立つツールです。サイズ、色、形状などのマーカー属性を使用すると、マークされた各場所に関する追加情報を伝えることができます。場合によっては、この追加情報が動的に変化し、デベロッパーが地図のビジュアリゼーションを更新して、ユーザーに最新の情報を提供したいと考えることがあります。

このドキュメントでは、小売チェーンが地図を使用して店舗の待ち時間をユーザーに提供するという例を使用して説明します。ただし、この同じアーキテクチャは、他の多くのユースケースにも使用できます。他にも次のようなアイデアがあります。

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

動的な高度なマーカーソリューション

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

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

ステップ 1 - 視覚体験を定義する属性を決定する

最初のステップは、ユーザーに表示する 1 つ以上の位置情報プロパティを決定することです。この場合、各店舗の現在の待ち時間（分単位）という 1 つのプロパティのみを表示します。

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

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

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

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

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

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

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

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

高度なマーカーを使用して、スタイル設定されたマーカーを地図上にレンダリングできるようになりました。高度なマーカーは、Google Maps Platform の Maps JavaScript API で作成された地図にレンダリングできます。高度なマーカーを使用する場合は、JS マップリクエストにマップ 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 を使用して、最新の待ち時間がユーザーに表示されるようになりました。

ヒーロー画像には、サンフランシスコを中心とした Google Maps JS の地図が表示されています。いくつかの場所に、「2 分」や「4 分」と表示されたカラフルなマーカーが表示されています。色とコンテンツは時間の経過とともに更新されます。

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

リアルタイムデータソースに接続する方法はさまざまです。以下では、Firebase Cloud Messaging と Websockets の 2 つの代替オプションについて説明します。どのアプローチを選択する場合でも、地図ツールのパフォーマンスを維持するために、次の要素を考慮してください。

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

Firebase Cloud Messaging

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

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

WebSocket

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

まとめ

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

次のアクション

寄稿者

主な著者:

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

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

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