CREAR UN MAPA INCRUSTADO EN UNA PÁGINA WEB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mapa Incrustado</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
font-size: 24px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px;
gap: 20px;
}
iframe {
border: 2px solid #ccc;
border-radius: 8px;
width: 80%;
max-width: 800px;
height: 450px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
Mapa de Madrid Incrustado
</header>
<div class="container">
<p>Este es un ejemplo de un mapa incrustado desde Google Maps.</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3048.5804462687194!2d-3.703790084604138!3d40.41677597936339!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42288f25ed455f%3A0x1731bd8aebdb76e3!2sMadrid!5e0!3m2!1ses!2ses!4v1672601171352!5m2!1ses!2ses"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
<footer>
© 2024 Mapas Incrustados. Todos los derechos reservados.
</footer>
</body>
</html>
No hay comentarios.:
Publicar un comentario