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

高度なマーカーと 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 にアクセスできるようにします。

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

ステップ 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 はプッシュアプローチです。このアプローチでは、バックエンドで待ち時間データが更新されるたびに、地図アプリに更新が送信されます。更新メッセージは、マーカーの外観とコンテンツを更新するコールバック関数をトリガーします。

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

WebSocket

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

まとめ

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

次のアクション

寄稿者

主な著者:

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

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

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