Air Quality Meter Widget (Experimental)
Stay organized with collections
Save and categorize content based on your preferences.
Report an issue Request a feature
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 to your app or web page with minimal code.
The Air Quality Meter Widget uses the
CurrentConditions.Lookup 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 and
Air Quality API supported countries and available AQIs
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.
How to use the Air Quality Meter Widget
Before using the Air Quality Meter Widget, enable the Air Quality API.
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:
<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:
<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.
See the complete code example
JavaScript
letmap,meter,marker; // Initialize the map. asyncfunctioninitMap(){ // Set to the center of the continental US. constcenter={ lat:40.6048080, lng:-99.386252, }; // Import needed libraries. awaitPromise.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:1pxsolidgrey; 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>