大気質測定器ウィジェット（試験運用版）

問題を報告する 機能をリクエストする

大気質計ウィジェットは、特定の場所の大気質を表示するためのカスタマイズ可能な HTML 要素を提供します。これを使用すると、最小限のコードを記述して、Air Quality API から現在の大気質情報をアプリやウェブページに取得できます。

大気質計ウィジェットは CurrentConditions.Lookup メソッドを使用します。このメソッドは、選択した現在地でローカル AQI が利用可能な場合に、ローカル AQI を返します。大気質計ウィジェットは、米国 EPA のローカル AQI に対応しています。今後、ローカル指数の追加もサポートされる予定です。大気質計でローカル AQI がまだサポートされていない場合は、ユニバーサル AQI が表示されます。詳細と、基盤となる CurrentConditions.Lookup メソッドの最新のサポート範囲については、大気質指数と Air Quality API のサポートされている国と利用可能な AQI をご覧ください。

次の例は、カリフォルニア州マウンテンビューの現在の状況を示す大気質計ウィジェットを示しています。

大気質計ウィジェットの使用方法

大気質計ウィジェットを使用する前に、Air Quality API を有効にしてください。

gmp-air-quality-meter 要素を追加して、大気質計ウィジェットを HTML ページに追加します。この要素は、選択した位置の緯度と経度の座標を設定する location 属性の設定にも使用できます。

<gmp-air-quality-meter location="47.656905,-122.407355"></gmp-air-quality-meter>

JavaScript で大気質計ウィジェットを設定することもできます。

<script>
const {AirQualityMeterElement} = await google.maps.importLibrary('airQuality');
const meterElement = new AirQualityMeterElement({
  location: {lat: 47.656905, lng: -122.407355}
});
document.body.append(meterElement);
</script>

次の例は、地図に埋め込まれた大気質計ウィジェットを示しています。地図をクリックすると、その場所の大気質が表示されます。

コードサンプルの全文を見る

JavaScriptCSSHTML
let map, meter, marker;

// Initialize the map.
async function initMap() {
  // Set to the center of the continental US.
  const center = {
    lat: 40.6048080,
    lng: -99.386252,
  };

  // Import needed libraries.
  await Promise.all([
    google.maps.importLibrary('airQuality'),
    google.maps.importLibrary('maps'),
    google.maps.importLibrary('marker'),
  ]);

  map = document.getElementById('map_element');
  map.innerMap.setOptions({
    mapTypeControl: false,
    fullscreenControl: false,
    clickableIcons: false,
  });

  meter = document.getElementById('meter_element');
  marker = document.getElementById('marker_element');

  map.center = center;
  marker.position = meter.location = {lat: 37.424100, lng: -122.092692};

  // Add an event listener to handle map clicks.
  map.innerMap.addListener('click', async (event) => {
    marker.position = meter.location = event.latLng;
  });
}

initMap();

    
/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

body {
  margin: 0;
}

gmp-map {
  height: 400px;
}

gmp-air-quality-meter {
  margin: 8px;
  padding: 8px;
  background: white;
  border: 1px solid grey;
  border-radius: 1px;
  font-size: 16px;
}
    
<!DOCTYPE html>
<html>
<head>
  <script>
      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
          key: "YOUR_API_KEY",
          v: "alpha"
        });
  </script>
</head>
<body>
    <gmp-map map-id="DEMO_MAP_ID" zoom="4" id="map_element">
      <gmp-air-quality-meter slot="control-block-start-inline-start" id="meter_element"></gmp-air-quality-meter>
      <gmp-advanced-marker id="marker_element"></gmp-advanced-marker>
    </gmp-map>
</body>
</html>