aqicn.orgのリアルタイム大気質マップは、スクリプトタグを1つ追加するだけで、あなたのウェブサイトに埋め込むことができます。

以下のコードを、地図を表示させたいページの場所にコピーしてください。

<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="jp"
        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="jp"
        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", "jp");
  document.head.appendChild(s);
</script>

マップは、スクリプトタグの以下の属性で構成されます。非同期読み込み用のdata-dom-target除き、すべてオプションです。

同じページに複数の地図を埋め込むことができます。地図ごとに1つのスクリプトタグを使用してください。

以下のオプションに必要事項を入力して、マップのコードを取得し、プレビューを確認してください。

• 地図上のリンク（駅の詳細情報など）は新しいタブで開くため、訪問者はページから離れる必要がありません。
• この地図は、 httpまたはhttpsで配信される任意の Web サイトに埋め込むことができます。ローカル ファイル ( file:// ) として開かれたページからは表示できません。
• マップがサンドボックス化された iframe 内に配置される場合、サンドボックスは少なくともallow-scripts allow-same-origin allow-popups許可する必要があります。
• 世界大気質指数プロジェクトおよびデータソースへの帰属表示を削除したり隠したりしないでください。

iframeを直接使用する

ページにスクリプトを追加できない場合は、地図をプレーンなiframeで埋め込むこともできます。位置情報はURLの一部であり、表示はlat 、 lng 、 zoomパラメータで設定されます。

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