Puedes insertar cualquiera de los mapas de calidad del aire en tiempo real de aqicn.org en tu sitio web con una sola etiqueta de script.

Copia el código que aparece a continuación donde quieras que aparezca el mapa en tu página:

<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="es"
        data-height="450"></script>

Resultado (mueva o haga zoom en el mapa para actualizar el código anterior):

Para evitar retrasos en la carga de la página, el script se puede cargar de forma asíncrona con el atributo async o defer . Dado que el script no se ejecuta en la posición especificada en la página, se requiere el atributo data-dom-target para indicar el elemento donde se inserta el mapa. Este elemento puede ubicarse en cualquier parte de la página, antes o después de la etiqueta `script`.

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

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

Resultado:

Cargando el script desde javascript

El script también se puede insertar dinámicamente, por ejemplo, desde un gestor de etiquetas o una aplicación de una sola página. Se aplica la misma regla 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", "es");
  document.head.appendChild(s);
</script>

El mapa se configura con los siguientes atributos de la etiqueta de script. Todos son opcionales, excepto data-dom-target para la carga asíncrona.

Se pueden insertar varios mapas en la misma página: utilice una etiqueta de script por cada mapa.

Rellena las opciones que aparecen a continuación para obtener el código de tu mapa y previsualizarlo.

• Los enlaces del mapa (por ejemplo, los detalles de la estación) se abren en una pestaña nueva, para que los visitantes no abandonen la página.
• El mapa se puede insertar en cualquier sitio web que se sirva a través de http o https . No se puede mostrar desde una página abierta como un archivo local ( file:// ).
• Si el mapa se coloca en un iframe aislado, el entorno aislado debe permitir como mínimo allow-scripts allow-same-origin allow-popups .
• Por favor, no elimine ni oculte la atribución al proyecto Índice Mundial de Calidad del Aire ni a las fuentes de datos.

Utilizando un iframe directamente

Si no puedes añadir scripts a tu página, también puedes insertar el mapa con un iframe simple. La ubicación forma parte de la URL y la vista se configura con los parámetros lat , lng y zoom :

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