Este artículo demostrará el proceso de hacer que los mapas integrados sean responsivos.
¿Cómo hacer que los mapas integrados sean responsivos?
Los usuarios pueden incrustar el mapa en HTML de forma responsiva utilizando algunas propiedades CSS. Sin embargo, primero es necesario obtener el enlace incorporado. Para ello, primero, realice el paso 1 y luego incruste el mapa en HTML a continuación:
Paso 1: obtenga el enlace para insertar del mapa
Para obtener el enlace de mapas integrados, primero navegue hasta ' mapas de Google ”:
Clickea en el ' Compartir o insertar mapa ' opción:
Ahora, haga clic en “ Insertar un mapa ”para obtener el enlace para insertar:
Después de eso, haga clic en ' COPIAR HTML ”código para copiar el código:
Paso 2: incrustar el mapa en HTML
Para incrustar un mapa en HTML, primero cree una estructura HTML. En el HTML, pegue el enlace para insertar copiado dentro del Producción Ahora se puede observar en el resultado siguiente que el mapa se ha incrustado y también responde: Para que los mapas incrustados respondan, primero cree una estructura HTML que tenga un
< h1 > Ubicación en Google Maps < / h1 >
< div clase = 'mapa-contenedor' >
< marco flotante
ancho = '100%'
altura = '500'
estilo = 'borde: 0'
src = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d328204.9017193669!2d-74.30933777495511!3d40.69753995297432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
'1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e1!3m2!1sen!2s!4v1695734740712!5m2!1sen!2s'
>< / marco flotante >
< / div >
< / cuerpo >
Conclusión