Widget Misuratore della qualità dell'aria (sperimentale)

Segnala un problema Richiedi una funzionalità

Il widget Misuratore della qualità dell'aria fornisce un elemento HTML personalizzabile per visualizzare la qualità dell'aria per una determinata località. Puoi utilizzarlo per importare le informazioni attuali sulla qualità dell'aria dall'API Air Quality alla tua app o pagina web con un codice minimo.

Il widget Misuratore della qualità dell'aria utilizza il metodo CurrentConditions.Lookup, che restituisce l'IQA locale se è disponibile per la località selezionata. Il widget Misuratore della qualità dell'aria supporta l'IQA locale dell'EPA degli Stati Uniti, con il supporto pianificato di ulteriori indici locali in futuro. Se l'IQA locale non è ancora supportato dal misuratore della qualità dell'aria, verrà visualizzato l'IQA universale. Per ulteriori informazioni e per i dettagli più recenti sulla copertura del metodo CurrentConditions.Lookup sottostante, consulta IQA e Paesi supportati dall'API Air Quality e IQA disponibili.

L'esempio seguente mostra il widget Misuratore della qualità dell'aria con le condizioni attuali per Mountain View, in California.

Come utilizzare il widget Misuratore della qualità dell'aria

Prima di utilizzare il widget Misuratore della qualità dell'aria, abilita l'API Air Quality.

Aggiungi il widget Misuratore della qualità dell'aria a una pagina HTML aggiungendo l'elemento gmp-air-quality-meter, che può essere utilizzato anche per impostare l'attributo location, che imposta le coordinate di latitudine e longitudine per la località scelta:

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

Puoi anche configurare il widget Misuratore della qualità dell'aria in 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>

L'esempio seguente mostra il widget Misuratore della qualità dell'aria incorporato in una mappa. Fai clic sulla mappa per visualizzare la qualità dell'aria per una località.

Visualizza l'esempio di codice 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>