এয়ার কোয়ালিটি মিটার উইজেট (এক্সপেরিমেন্টাল)

সমস্যার বিষয়ে অভিযোগ জানান ফিচারের জন্য অনুরোধ করুন

এয়ার কোয়ালিটি মিটার উইজেট, নির্দিষ্ট লোকেশনের এয়ার কোয়ালিটি দেখানোর জন্য কাস্টমাইজ করা যায় এমন HTML এলিমেন্ট প্রদান করে। আপনি এটি ব্যবহার করে Air Quality API থেকে বর্তমান এয়ার কোয়ালিটি সংক্রান্ত তথ্য আপনার অ্যাপ বা ওয়েব পেজে নিয়ে আসতে পারবেন এবং এর জন্য খুব কম কোড লিখতে হবে।

এয়ার কোয়ালিটি মিটার উইজেট CurrentConditions.Lookup পদ্ধতি ব্যবহার করে, যা বেছে নেওয়া লোকেশনের জন্য উপলভ্য থাকলে স্থানীয় AQI দেখাবে। এয়ার কোয়ালিটি মিটার উইজেট মার্কিন যুক্তরাষ্ট্রের EPA স্থানীয় AQI-এর সাথে কাজ করে এবং ভবিষ্যতে অতিরিক্ত স্থানীয় ইনডেক্সের সাথে কাজ করার পরিকল্পনা রয়েছে। এয়ার কোয়ালিটি মিটারে স্থানীয় AQI এখনও কাজ না করলে, এটি ইউনিভার্সাল AQI দেখাবে। আরও তথ্য এবং CurrentConditions.Lookup পদ্ধতির লেটেস্ট কভারেজ সংক্রান্ত বিবরণের জন্য AQ ইন্ডেক্স এবং Air Quality API কাজ করে এমন দেশ ও উপলভ্য AQI দেখুন।

নিচের উদাহরণে ক্যালিফোর্নিয়ার মাউন্টেন ভিউয়ের বর্তমান পরিস্থিতি সহ এয়ার কোয়ালিটি মিটার উইজেট দেখানো হয়েছে।

এয়ার কোয়ালিটি মিটার উইজেট কীভাবে ব্যবহার করবেন

এয়ার কোয়ালিটি মিটার উইজেট ব্যবহার করার আগে, এয়ার কোয়ালিটি API চালু করুন।

gmp-air-quality-meter এলিমেন্ট যোগ করে HTML পৃষ্ঠায় এয়ার কোয়ালিটি মিটার উইজেট যোগ করুন, যা 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>

নিচের উদাহরণে ম্যাপে এম্বেড করা এয়ার কোয়ালিটি মিটার উইজেট দেখানো হয়েছে। কোনও লোকেশনের এয়ার কোয়ালিটি দেখতে ম্যাপে ক্লিক করুন।

সম্পূর্ণ কোডের উদাহরণ দেখুন

জাভাস্ক্রিপ্ট

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>