Simulador de navegacion en google maps en html
- samuel gaitan
- 27 mar
- 1 Min. de lectura
Actualizado: 16 abr
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viajes Samuel - Explorando Colombia y el Mundo</title>
<style>
body {
background-color: rgb(200, 200, 200);
font-family: Arial, sans-serif;
text-align: center;
}
h1, h2 {
color: #2c3e50;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #3498db;
color: white;
padding: 10px;
margin: 5px;
border-radius: 5px;
display: inline-block;
}
.colombia {
background: #27ae60;
}
iframe {
width: 100%;
height: 400px;
border: none;
margin-top: 20px;
}
.search-buttons {
margin-top: 10px;
}
.search-buttons button {
margin: 5px;
padding: 10px;
border: none;
background-color: #2c3e50;
color: white;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>🌎 Lugares por visitar 🌍</h1>
<p>Me encanta viajar y explorar nuevos destinos.</p>
<h2>🗺️ Mi Viaje por el Mundo</h2>
<img src="https://source.unsplash.com/800x400/?world,map,travel" alt="Mapa de viajes por el mundo">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31509125.680243764!2d-100.44588233962306!3d37.27551416305685!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzfCsDE2JzMwLjAiTiAxMDTCsDI3JzMwLjAiVw!5e0!3m2!1ses!2s!4v1618912712345!5m2!1ses!2s" allowfullscreen></iframe>
<h2>🇨🇴 Viajes por Colombia</h2>
<p>Descubriendo la belleza de mi país.</p>
<ul>
<li class="colombia">
Parque Nacional Tayrona
<div class="search-buttons">
<button onclick="searchGoogle('Parque Nacional Tayrona')">Google</button>
<button onclick="searchGoogleImages('Parque Nacional Tayrona')">Imágenes</button>
<button onclick="searchGoogleMaps('Parque Nacional Tayrona')">Maps</button>
</div>
</li>
<li class="colombia">
Caño Cristales
<div class="search-buttons">
<button onclick="searchGoogle('Caño Cristales')">Google</button>
<button onclick="searchGoogleImages('Caño Cristales')">Imágenes</button>
<button onclick="searchGoogleMaps('Caño Cristales')">Maps</button>
</div>
</li>
<li class="colombia">
Santuario de Las Lajas
<div class="search-buttons">
<button onclick="searchGoogle('Santuario de Las Lajas')">Google</button>
<button onclick="searchGoogleImages('Santuario de Las Lajas')">Imágenes</button>
<button onclick="searchGoogleMaps('Santuario de Las Lajas')">Maps</button>
</div>
</li>
</ul>
<script>
function searchGoogle(query) {
window.open(`https://www.google.com/search?q=${encodeURIComponent(query)}`, '_blank');
}
function searchGoogleImages(query) {
window.open(`https://www.google.com/search?tbm=isch&q=${encodeURIComponent(query)}`, '_blank');
}
function searchGoogleMaps(query) {
window.open(`https://www.google.com/maps/search/${encodeURIComponent(query)}`, '_blank');
}
</script>
</body>
</html>
Comentarios