> [!WARNING]
> This product or feature is Experimental (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage descriptions](https://developers.google.com/maps/launch-stages.md.txt).  
> **Please file bugs and feature requests to help guide our future releases.**

[Report an issue](https://issuetracker.google.com/issues/new?component=188853&template=788207)
[Request a feature](https://issuetracker.google.com/issues/new?component=188853&template=787814)

*** ** * ** ***

The Air Quality Meter Widget provides a customizable HTML element to display air quality for a
given location. You can use it to bring current air quality information from the
[Air Quality API](https://developers.google.com/maps/documentation/air-quality) to your app or web page with minimal
code.

The Air Quality Meter Widget uses the [`CurrentConditions.Lookup`](https://developers.google.com/maps/documentation/air-quality/reference/rest/v1/currentConditions/lookup.md.txt) method, which will return the
local AQI if it's available for the selected location. The Air Quality Meter Widget supports the US EPA local AQI, with planned support for additional local indexes in the future. If local AQI is not yet supported by the Air Quality Meter, it will display the Universal AQI. See
[AQ Index](https://developers.google.com/maps/documentation/air-quality/laqis.md.txt) and
[Air Quality API supported countries and available AQIs](https://developers.google.com/maps/documentation/air-quality/coverage.md.txt)
for more information and the latest coverage details of the underlying `CurrentConditions.Lookup` method.

The following example shows the Air Quality Meter Widget with current conditions for Mountain View, CA.
<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/air-quality-widget_fc760447c2df8216db7804a3ec1791c564201a64e5815573309200f9c222a42b.frame" class="framebox inherit-locale " allow="clipboard-write https://developers.devsite.google" allowfullscreen is-upgraded></iframe>

## How to use the Air Quality Meter Widget

Before using the Air Quality Meter Widget, [enable the Air Quality API](https://developers.google.com/maps/documentation/air-quality/cloud-setup#enabling-apis).

Add the Air Quality Meter Widget to an HTML page by adding the `gmp-air-quality-meter`
element, which may also be used to set the `location`
attribute, which sets the latitude and longitude coordinates for the chosen location:

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

You can also set up the Air Quality Meter Widget in JavaScript:

```html
<script>
const {AirQualityMeterElement} = await google.maps.importLibrary('airQuality');
const meterElement = new AirQualityMeterElement({
  location: {lat: 47.656905, lng: -122.407355}
});
document.body.append(meterElement);
</script>
```

The following example shows the Air Quality Meter Widget embedded in a map. Click the
map to show the air quality for a location.
<iframe src="https://developers.devsite.google/frame/maps/documentation/javascript/examples/full/air-quality-widget-demo.jshtml"></iframe>

## See the complete code example

### JavaScript

```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

```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

```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>
    
```