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

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

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

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

地図上のマーカーは、ユーザーに充実したマッピングエクスペリエンスを提供するための便利なツールです。サイズ、色、形などのマーカー属性を使用すると、マークされた各場所に関する追加情報を伝えることができます。場合によっては、この追加情報が動的に変更され、デベロッパーは地図の可視化を更新してユーザーに新鮮な印象を与えたい場合があります。

この記事では、説明のために例を使用します。ある小売チェーンは、地図を使用して店舗の待ち時間をユーザーに表示したいと考えています。ただし、この同じアーキテクチャは他の多くのユースケースにも使用できます。その他のアイデアは次のとおりです。

ホテルの客室の空き状況: ホテル検索結果を示すマップで、客室の空き状況の更新頻度は、在庫が減るにつれてユーザーがホテルを予約する動機付けとなる重要なシグナルです。
駐車スペースの空き情報: 駐車場の地図上で、ユーザーが到着時に駐車スペースのある目的地を迷わずに選択できるようにします。
レストランの営業状況（営業中、休業中、休業中）: レストランの検索結果を表示する地図では、レストランが到着したときに休業している可能性があることをユーザーに認識させることが重要です。

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

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

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

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

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

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

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

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

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

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

アプリケーションがサーバーから待ち時間データにアクセスできるように、このアーキテクチャでは 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 を使用して、ユーザー向けの最新の待ち時間を可視化できるようになりました。

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

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

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

Firebase Cloud Messaging

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

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

WebSocket

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

まとめ

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

次のアクション

寄稿者

主な作成者:

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

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

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