공기질 측정기 위젯 (실험용)

문제 신고 기능 요청

공기질 측정기 위젯은 지정된 위치의 공기질을 표시하는 맞춤설정 가능한 HTML 요소를 제공합니다. 이를 사용하면 최소한의 코드로 Air Quality API에서 현재 공기질 정보를 앱 또는 웹페이지로 가져올 수 있습니다.

공기질 측정기 위젯은 선택한 위치에서 사용할 수 있는 경우 로컬 AQI를 반환하는 CurrentConditions.Lookup 메서드를 사용합니다. 공기질 측정기 위젯은 미국 EPA 현지 AQI를 지원하며 향후 추가 현지 색인을 지원할 계획입니다. 공기질 측정기에서 아직 현지 AQI를 지원하지 않는 경우 범용 AQI가 표시됩니다. 자세한 내용과 기본 CurrentConditions.Lookup 메서드의 최신 적용 범위 세부정보는 AQ 지수 및 공기질 API 지원 국가 및 사용 가능한 AQI를 참고하세요.

다음 예는 캘리포니아 마운틴뷰의 현재 상태가 포함된 공기질 측정기 위젯을 보여줍니다.

공기질 측정기 위젯 사용 방법

공기질 측정기 위젯을 사용하기 전에 Air Quality API를 사용 설정합니다.

선택한 위치의 위도와 경도 좌표를 설정하는 location 속성을 설정하는 데도 사용할 수 있는 gmp-air-quality-meter 요소를 추가하여 HTML 페이지에 공기질 측정기 위젯을 추가합니다.

<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>

다음 예는 지도에 삽입된 공기질 측정기 위젯을 보여줍니다. 지도를 클릭하여 특정 위치의 공기질을 표시합니다.

전체 코드 예 보기

자바스크립트

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();

CSS

/**
 * @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;
}

HTML

<!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>