Widget Pengukur Kualitas Udara (Eksperimental)

Laporkan masalah Minta fitur

Widget Pengukur Kualitas Udara menyediakan elemen HTML yang dapat disesuaikan untuk menampilkan kualitas udara untuk lokasi tertentu. Anda dapat menggunakannya untuk menampilkan informasi kualitas udara saat ini dari Air Quality API ke aplikasi atau halaman web dengan kode minimal.

Widget Pengukur Kualitas Udara menggunakan metode CurrentConditions.Lookup, yang akan menampilkan AQI lokal jika tersedia untuk lokasi yang dipilih. Widget Pengukur Kualitas Udara mendukung AQI lokal EPA Amerika Serikat, dengan dukungan yang direncanakan untuk indeks lokal tambahan di masa mendatang. Jika AQI lokal belum didukung oleh Pengukur Kualitas Udara, AQI Universal akan ditampilkan. Lihat AQ Index dan Negara yang didukung Air Quality API dan AQI yang tersedia untuk mengetahui informasi selengkapnya dan detail cakupan terbaru dari metode CurrentConditions.Lookup yang mendasarinya.

Contoh berikut menunjukkan Widget Pengukur Kualitas Udara dengan kondisi saat ini untuk Mountain View, CA.

Cara menggunakan Widget Pengukur Kualitas Udara

Sebelum menggunakan Widget Pengukur Kualitas Udara, aktifkan Air Quality API.

Tambahkan Widget Pengukur Kualitas Udara ke halaman HTML dengan menambahkan elemen gmp-air-quality-meter, yang juga dapat digunakan untuk menetapkan atribut location, yang menetapkan koordinat lintang dan bujur untuk lokasi yang dipilih:

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

Anda juga dapat menyiapkan Widget Pengukur Kualitas Udara di 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>

Contoh berikut menunjukkan Widget Pengukur Kualitas Udara yang disematkan dalam peta. Klik peta untuk menampilkan kualitas udara untuk suatu lokasi.

Lihat contoh kode lengkap

JavaScript

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>