このドキュメントでは、Air Quality API を使用して充実した Place Search 体験を構築する方法を見ていきます。 ファネルの最初から最後まで、大気質をユーザーにとって価値のあるシグナルとして活用する方法と、Air Quality API データを既存のエクスペリエンスに埋め込む方法を説明します。
ユースケースと付加価値
Air Quality API シグナルは、ユーザーが訪問先を探しているときなど、さまざまな検索エクスペリエンスに適しています。Air Quality API は次の機能を提供します。
- リアルタイム * と履歴データ - 現在の状態を示す最新の正確なデータと、過去 30 日間の時刻ごとの履歴データ。(* 屋外大気質の 1 時間ごとのスナップショット)
- グローバル データとローカル データ - 100 か国以上の地域全体をカバーし、高度にローカライズされた(最大 500 m)Air Quality API データは、ユーザーが最も適切な場所を比較して決定するための重要なシグナルを提供します。
近い場所でも大気質が大きく異なる場合があります
サンプル チュートリアル
エクスペリエンスの早い段階で大気質データを表示する
Air Quality API データを表示する方法は主に 2 つあります。
現在の状況 / 1 時間ごと: 個々の値を取得して、各ロケーションに対して表示します。
(位置ピンに Air Quality API データを表示するセクションに移動)ヒートマップ タイル: 現在の屋外大気質状況を表す色付きのレイヤを地図の上に重ねて表示します。国別レイヤのインデックスを利用できます。
(地図上に Air Quality API ヒートマップ レイヤを表示するのセクションに移動)
位置情報ピンに Air Quality API データを表示する
- 地域の指数(世界共通の大気質指数またはローカル大気質指数)を選択します(最大 70 種類の大気質指数(AQI)を使用できます)。大気質指数(AQI)は、特定の国(米国 EPA など)が、さまざまな計算方法、データソース、指定された目的に基づいて、さまざまな大気質レベルを分類する尺度です。
- 場所の検索機能から直接、Air Quality API の主要な値と色コードを可視化できます。
デフォルトの表示には、色コードのみを含めることができます。
ピン選択時にAir Quality API の詳細情報を表示:
- ユニバーサル AQI / ローカル AQI の意味。
- 汚染物質レベル: 空気中の粒子とガスの測定値(主な汚染物質、濃度、発生源、影響)。
- 健康に関する推奨事項: 現在の大気質の状況に応じた推奨事項です。
- デフォルトで表示される情報のレベルは必要に応じて調整できます。地域のデータポイントは、他の地域と比較する際に役立つことがよくあります。
大気質セクションの表示例
{ "dateTime": "2023-08-09T10:00:00Z", "regionCode": "fr", "indexes": [ { "code": "uaqi", "displayName": "Universal AQI", "aqi": 76, "aqiDisplay": "76", "color": { "red": 0.4117647, "green": 0.77254903, "blue": 0.20392157 }, "category": "Good air quality", "dominantPollutant": "pm10" }, … ], "pollutants": [ { "code": "co", "displayName": "CO", "fullName": "Carbon monoxide", "concentration": { "value": 95.18, "units": "PARTS_PER_BILLION" }... }, … ], "healthRecommendations": -{ "generalPopulation": "With this level of air quality, you have no limitations. Enjoy the outdoors!", "elderly": "If you start to feel respiratory discomfort such as coughing or breathing difficulties, consider red ...", "lungDiseasePopulation": … } }
- または、位置情報の操作時にのみ大気質データをクエリすることもできます。
- Air Quality API インデックスを使用して、近くの場所をフィルタできます。たとえば、地域の公園を検索する場合は、大気質の良い公園のみが表示されます。
大気質対応
... "color":{ "red": 0.9490196, "green": 0.98039216, "blue": 0.019607844 } ...
var red = parseInt(colorResponse.red*255)|| 1; var green = parseInt(colorResponse.green*255)|| 1; var blue = parseInt(colorResponse.blue*255)|| 1; // --> output rgb(241,250,5)
Air Quality API ヒートマップ レイヤを地図上に表示する
ヒートマップの色付きタイルは、次のような場合に最適です。
- を使用して、広範囲の概要を把握できます。
- を使用して、そのエリア内のニュアンスをすばやく表示できます。
Maps JavaScript API と ImateMapType を使用して、Google マップのビューポート全体をカバーするために必要な個々のタイルを表示します。ヒートマップ タイルは、ユーザーがパン、ズーム、位置の変更など、地図を操作すると更新されます。
使用できるズームレベルの値は最大 16 です。
地域密着型の検索では、Air Quality API ヒートマップ タイルレイヤが表示されなくなることがあります。
大気質指数から、次のヒートマップ地図の種類を選択できます。
値とその色のランクをユーザーが理解できるように、色スケールを示してください。
- グラデーション スケール UAQI(0 ~ 100): 低 / 高
カラーパレットの CSS コード スニペット:
.gradient-scale { background: linear-gradient(to right, rgb(99, 20, 161) 0%, /* purple */ rgb(149, 0, 25) 20%, /* red */ rgb(248, 47, 21) 40%, /* orange */ rgb(255, 248, 35) 60%, /* yellow */ rgb(34,163,120) 80%, /* steelblue */ rgb(255,255,255) 100% /* white */ ); }
- UAQI(0 ~ 100)スケールの主要なポイントを表す単色: 低 / 高
クエリの数と関連する費用
- Maps JavaScript API: エクスペリエンスの読み込み時に 1 つの地図。
- Air Quality API:
- すべての場所に対して 1 つのクエリ(すべて地図の読み込み時、またはユーザーの選択時のみ)。
- ヒートマップ タイルレイヤ: すべてのタイル画像は 256 x 256 ピクセルで、モバイル デバイスまたはウェブに表示される標準地図をカバーするには 12 ~ 14 個のタイルが必要です。pull された各タイルは、1 SKU ユニットとしてカウントされます。
- Nearby Search (New) API: 表示される場所 20 件ごとに 1 件のクエリ。クエリ レスポンスの一部であるプレイスデータに応じて異なる課金。
まとめ
Air Quality API は、ユーザーが訪問先を決めるうえで重要なデータポイントになり得ることが示されました。そのため、大気質データは、一度に表示される情報量と表示方法に注意しながら、検索体験のできるだけ早い段階で表示する必要があります。
次のアクション
推奨する関連情報:
寄稿者
この記事は Google が管理しています。以下は、このガイドを最初に作成したコントリビューターです。
主な作成者:
ソリューション エンジニア | Thomas Anglaret