एयर क्वालिटी मीटर विजेट (प्रयोग के तौर पर उपलब्ध)

किसी समस्या की शिकायत करना किसी सुविधा के लिए अनुरोध करना

एयर क्वालिटी मीटर विजेट, किसी जगह की एयर क्वालिटी दिखाने के लिए, पसंद के मुताबिक बनाया जा सकने वाला एचटीएमएल एलिमेंट उपलब्ध कराता है. इसका इस्तेमाल करके, Air Quality API से हवा की क्वालिटी की मौजूदा जानकारी को कम से कम कोड के साथ अपने ऐप्लिकेशन या वेब पेज पर लाया जा सकता है.

एयर क्वालिटी मीटर विजेट, CurrentConditions.Lookup तरीके का इस्तेमाल करता है. यह तरीका, चुनी गई जगह के लिए उपलब्ध होने पर, स्थानीय एयर क्वालिटी इंडेक्स दिखाएगा. एयर क्वालिटी मीटर विजेट, अमेरिका के ईपीए के स्थानीय एक्यूआई के साथ काम करता है. आने वाले समय में, अन्य स्थानीय इंडेक्स के लिए भी इसकी सुविधा उपलब्ध कराई जाएगी. अगर एयर क्वालिटी मीटर में स्थानीय एक्यूआई की सुविधा अभी उपलब्ध नहीं है, तो यह यूनिवर्सल एक्यूआई दिखाएगा. CurrentConditions.Lookup तरीके के बारे में ज़्यादा जानकारी और कवरेज की नई जानकारी पाने के लिए, एक्यूआई और एयर क्वालिटी एपीआई के साथ काम करने वाले देश और उपलब्ध एक्यूआई देखें.

इस उदाहरण में, माउंटेन व्यू, कैलिफ़ोर्निया की मौजूदा स्थितियों के साथ एयर क्वालिटी मीटर विजेट दिखाया गया है.

एयर क्वालिटी मीटर विजेट इस्तेमाल करने का तरीका

एयर क्वालिटी मीटर विजेट का इस्तेमाल करने से पहले, एयर क्वालिटी एपीआई चालू करें.

gmp-air-quality-meter एलिमेंट जोड़कर, एयर क्वालिटी मीटर विजेट को एचटीएमएल पेज में जोड़ें. इसका इस्तेमाल location एट्रिब्यूट को सेट करने के लिए भी किया जा सकता है. यह एट्रिब्यूट, चुनी गई जगह के अक्षांश और देशांतर के निर्देशांक सेट करता है:

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

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>

इस उदाहरण में, मैप में एम्बेड किया गया एयर क्वालिटी मीटर विजेट दिखाया गया है. किसी जगह की एयर क्वालिटी देखने के लिए, मैप पर क्लिक करें.

कोड का पूरा उदाहरण देखना

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();

    
/**
 * @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;
}
    
<!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>