高度なマーカーと 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）を使用して、更新された待ち時間データを定期的にリクエストするプル方式を使用しています。以降のセクションでは、プッシュ方式を活用した代替アーキテクチャについて説明します。

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

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

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

高度なマーカーを使用して、地図上にスタイル設定されたマーカーをレンダリングできるようになりました。高度なマーカーは、Google Maps Platform's 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 を使用して、ユーザーに最新の待ち時間を可視化します。

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

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

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

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

Firebase Cloud Messaging

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

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

WebSockets

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

まとめ

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

次のステップ

コントリビューター

主な著者:

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

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

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

高度なマーカーと Firebase を使用してリアルタイムで顧客にアプローチ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

ステップ 1 - ビジュアル エクスペリエンスを定義する属性を決定する

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