世界空氣品質指數計畫的即時空氣品質地圖可以透過一個腳本標籤嵌入到任何網站上。此地圖顯示所選位置周圍所有監測站的即時空氣品質指數，並自動更新。

將以下程式碼複製到頁面上地圖應該出現的位置：

<script src="https://aqicn.org/maplet/embed.v1.js"
        data-city="london"
        data-lat="51.5074" data-lng="-0.1278" data-zoom="11"
        data-lang="hk"
        data-height="450"></script>

結果（移動或縮放地圖以更新上述程式碼）：

為了避免頁面渲染延遲，可以使用async或defer屬性非同步載入腳本。由於腳本不會在其頁面目前位置運行，因此需要使用data-dom-target屬性指定地圖插入的元素。該元素可以放置在頁面中的任何位置，包括 `<script>` 標籤之前或之後。

<div id="aqi-map"></div>

<script async src="https://aqicn.org/maplet/embed.v1.js"
        data-city="paris"
        data-lang="hk"
        data-dom-target="aqi-map"
        data-height="450"></script>

結果：

從 JavaScript 載入腳本

腳本也可以動態插入，例如透過標籤管理器或單頁應用程式。同樣的data-dom-target規則也適用：

<div id="aqi-map"></div>

<script>
  var s = document.createElement("script");
  s.src = "https://aqicn.org/maplet/embed.v1.js";
  s.setAttribute("data-city", "london");
  s.setAttribute("data-dom-target", "aqi-map");
  s.setAttribute("data-lang", "hk");
  document.head.appendChild(s);
</script>

此地圖配置了以下腳本標籤屬性。除用於非同步載入的data-dom-target外，其餘屬性均為可選。

在同一頁面上可以嵌入多個地圖：每個地圖使用一個腳本標籤。

填寫以下選項以取得地圖代碼並進行預覽。

• 地圖中的連結（例如車站詳情）會在新標籤頁中打開，這樣訪客就不會離開您的頁面。
• 地圖可以嵌入到任何透過http或https提供服務的網站上。它不能從作為本機檔案（ file:// ）開啟的頁面中顯示。
• 如果地圖放置在沙盒化的 iframe 中，則沙盒必須至少允許allow-scripts allow-same-origin allow-popups 。
• 請勿移除或隱藏世界空氣品質指數項目和資料來源的署名。

直接使用 iframe

如果無法在頁面中新增腳本，也可以使用普通的 iframe 嵌入地圖。位置資訊包含在 URL 中，地圖視圖則透過lat 、 lng和zoom參數設定：

<iframe src="https://aqicn.org/maplet/london/hk/?lat=51.5074&lng=-0.1278&zoom=11"
        width="100%" height="450" style="border:0" loading="lazy"
        title="Real-time air quality map"></iframe>