Widget de medidor de qualidade do ar (experimental)

Informar um problema Solicitar um recurso

O widget do medidor de qualidade do ar fornece um elemento HTML personalizável para mostrar a qualidade do ar em um determinado local. Você pode usá-la para trazer informações atuais da qualidade do ar da API Air Quality para seu app ou página da Web com um mínimo de código.

O widget do medidor de qualidade do ar usa o método CurrentConditions.Lookup, que vai retornar o IQA local se ele estiver disponível para o local selecionado. O widget do medidor de qualidade do ar é compatível com o AQI local da EPA dos EUA, e o suporte a outros índices locais está previsto para o futuro. Se o IQA local ainda não tiver suporte do Medidor de qualidade do ar, o IQA universal será exibido. Consulte Índice de qualidade do ar e Países com suporte da API Air Quality e IQAs disponíveis para mais informações e os detalhes mais recentes da cobertura do método CurrentConditions.Lookup.

O exemplo a seguir mostra o widget de medidor de qualidade do ar com as condições atuais para Mountain View, CA.

Como usar o widget de medidor de qualidade do ar

Antes de usar o widget do medidor de qualidade do ar, ative a API Air Quality.

Adicione o widget do medidor de qualidade do ar a uma página HTML adicionando o elemento gmp-air-quality-meter, que também pode ser usado para definir o atributo location, que define as coordenadas de latitude e longitude do local escolhido:

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

Também é possível configurar o widget do medidor de qualidade do ar em 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>

O exemplo a seguir mostra o widget do medidor de qualidade do ar incorporado a um mapa. Clique no mapa para mostrar a qualidade do ar em um local.

Confira o exemplo de código completo

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>