Widget de mesure de la qualité de l'air (expérimental)

Signaler un problème Demander une fonctionnalité

Le widget de mesure de la qualité de l'air fournit un élément HTML personnalisable pour afficher la qualité de l'air d'un emplacement donné. Vous pouvez l'utiliser pour intégrer les informations actuelles sur la qualité de l'air de l'API Air Quality à votre application ou à votre page Web avec un minimum de code.

Le widget de mesure de la qualité de l'air utilise la méthode CurrentConditions.Lookup, qui renvoie l'IQA local s'il est disponible pour l'emplacement sélectionné. Le widget de mesure de la qualité de l'air est compatible avec l'IQA local de l'EPA des États-Unis. D'autres indices locaux seront pris en charge à l'avenir. Si l'IQA local n'est pas encore pris en charge par l'IQA, l'IQA universel s'affiche. Pour en savoir plus et obtenir les dernières informations sur la couverture de la méthode CurrentConditions.Lookup sous-jacente, consultez Indice de qualité de l'air et Pays compatibles avec l'API Air Quality et IQA disponibles.

L'exemple suivant montre le widget de l'indice de qualité de l'air avec les conditions actuelles à Mountain View, en Californie.

Utiliser le widget de mesure de la qualité de l'air

Avant d'utiliser le widget de mesure de la qualité de l'air, activez l'API Air Quality.

Ajoutez le widget de mesure de la qualité de l'air à une page HTML en ajoutant l'élément gmp-air-quality-meter, qui peut également être utilisé pour définir l'attribut location, qui définit les coordonnées de latitude et de longitude de l'emplacement choisi:

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

Vous pouvez également configurer le widget de mesure de la qualité de l'air 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>

L'exemple suivant montre le widget de mesure de la qualité de l'air intégré à une carte. Cliquez sur la carte pour afficher la qualité de l'air d'un lieu.

Voir l'exemple de code complet

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>