¿Cómo creo un mapa responsivo para un sitio web?

Dado que ha etiquetado su consulta como HTML y Javascript, como sugirió Mike, el primer enlace para mí es: 5 formas de agregar Google Maps responsivo a su sitio web[^]

Para obtener un mapa simple de Google, este es el método más sencillo desde otra referencia aqui[^]:

1. Vaya al sitio web de Google Maps.
2. Busque la ubicación que desea incluir en su mapa integrado.
3. Haga clic en Compartir.
4. Haga clic en Insertar un mapa para ver una vista previa de la inserción. Aquí, puede alternar el área del mapa, el zoom, el tipo (mapa de calles o mapa satelital) y el tamaño (incluido un tamaño personalizado si lo desea)
5. Cuando esté listo para insertar, haga clic en Copiar HTML.
6. En su archivo HTML, pegue el código de inserción donde desea que aparezca el mapa en la página. El código se verá así (puede verse diferente según el tamaño que haya elegido para su mapa:
7. Guarde el archivo HTML y ábralo en un navegador web para ver el mapa en acción.
8. Haga que nuestro mapa incrustado responda con un poco de HTML y CSS adicionales
Código:
Primero, tome su código de inserción existente y colóquelo en su documento HTML. Luego, envuelve el <iframe> elemento (que representa el mapa) en un contenedor <div> con la clase google-map.

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. A continuación, en tu CSS, agrega el siguiente código:

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

Para crear un mapa en un sitio web que se ajuste al tamaño de la pantalla, puede utilizar la API JavaScript de Google Maps u otra biblioteca de mapas. Simplemente coloque el código del mapa dentro de un div contenedor.

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

Aplique principios de diseño usando CSS, como el uso de anchos basados ​​en porcentajes. Para controlar varios tamaños de pantalla, es posible que desee considerar emplear consultas de medios como las siguientes:

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}