Widget del medidor de calidad del aire (experimental)

Informa un problema Solicita una función

El widget del medidor de calidad del aire proporciona un elemento HTML personalizable para mostrar la calidad del aire de una ubicación determinada. Puedes usarla para llevar la información actual de la calidad del aire de la API de Air Quality a tu app o página web con un código mínimo.

El widget del medidor de calidad del aire usa el método CurrentConditions.Lookup, que mostrará el ICA local si está disponible para la ubicación seleccionada. El widget del medidor de calidad del aire admite el ICA local de la Agencia de Protección Ambiental (EPA) de EE.UU. y se planea admitir índices locales adicionales en el futuro. Si el medidor de calidad del aire aún no admite el ICA local, se mostrará el ICA universal. Consulta el Índice de calidad del aire y los países compatibles con la API de Air Quality y los ICA disponibles para obtener más información y los detalles de cobertura más recientes del método CurrentConditions.Lookup subyacente.

En el siguiente ejemplo, se muestra el widget del medidor de calidad del aire con las condiciones actuales de Mountain View, California.

Cómo usar el widget del medidor de calidad del aire

Antes de usar el widget del medidor de calidad del aire, habilita la API de Air Quality.

Para agregar el widget del medidor de calidad del aire a una página HTML, agrega el elemento gmp-air-quality-meter, que también se puede usar para establecer el atributo location, que establece las coordenadas de latitud y longitud de la ubicación elegida:

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

También puedes configurar el widget del medidor de calidad del aire en 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>

En el siguiente ejemplo, se muestra el widget del medidor de calidad del aire incorporado en un mapa. Haz clic en el mapa para mostrar la calidad del aire de una ubicación.

Consulta el ejemplo 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>