- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Publicación destacada
- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
La integración de
tecnologías web como HTML, CSS y JavaScript ha permitido el desarrollo de
aplicaciones altamente interactivas y útiles. En este artículo, exploraremos un
ejemplo de cómo crear un mapa interactivo con la capacidad de trazar rutas
entre puntos seleccionados, aprovechando la API de Google Maps y la
geolocalización del usuario.
Introducción
El
objetivo es desarrollar una aplicación web que permita a los usuarios
seleccionar puntos en un mapa y trazar rutas entre ellos, todo ello en tiempo
real y con la capacidad de ubicar al usuario en el mapa. Esta aplicación puede
ser útil para planificar viajes, encontrar direcciones o simplemente explorar
lugares de interés cercanos.
Código
HTML y JavaScript
A
continuación, se muestra el código completo que combina HTML y JavaScript para
lograr esta funcionalidad:
Html y JavaScript
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mapa y Ruta con Geolocalización</title> <style> #map { height: 400px; width: 100%; } </style> </head> <body> <h1>Selecciona puntos en el mapa y traza la ruta con geolocalización</h1> <div id="map"></div> <script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap" async defer></script> <script type="text/javascript"> let map, directionsService, directionsRenderer; let currentLocationMarker; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: { lat: 0, lng: 0 }, zoom: 150 }); directionsService = new google.maps.DirectionsService(); directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(map); map.addListener('click', function(event) { placeMarker(event.latLng); }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { const currentLocation = { lat: position.coords.latitude, lng: position.coords.longitude }; map.setCenter(currentLocation); map.setZoom(15); currentLocationMarker = new google.maps.Marker({ position: currentLocation, map: map, title: 'Tu ubicación actual' }); }, function() { handleLocationError(true, currentLocationMarker, map.getCenter()); }); } else { handleLocationError(false, currentLocationMarker, map.getCenter()); } } function placeMarker(location) { const marker = new google.maps.Marker({ position: location, map: map }); calculateAndDisplayRoute(); } function calculateAndDisplayRoute() { const markers = document.querySelectorAll('marker'); if (markers.length >= 2) { const origin = markers[0].position; const destination = markers[1].position; const request = { origin: origin, destination: destination, travelMode: 'DRIVING' }; directionsService.route(request, function(result, status) { if (status === 'OK') { directionsRenderer.setDirections(result); } }); } } function handleLocationError(browserHasGeolocation, marker, location) { console.error(browserHasGeolocation ? 'Error: El servicio de geolocalización falló.' : 'Error: Tu navegador no soporta geolocalización.'); map.setCenter(location); } </script> </body> </html>
Explicación
del código
El
código HTML proporciona la estructura básica de la página web y enlaza con la
API de Google Maps. El JavaScript se encarga de la inicialización del mapa, la
colocación de marcadores, el cálculo de rutas entre puntos y el manejo de la
geolocalización del usuario.
Conclusión
Este
ejemplo demuestra cómo utilizar HTML, CSS y JavaScript junto con la API de
Google Maps para crear una aplicación web interactiva que permite a los
usuarios explorar mapas, seleccionar puntos de interés y trazar rutas entre
ellos, todo ello con la capacidad adicional de geolocalización del usuario.
Este tipo de aplicaciones tienen un amplio rango de utilidades y pueden ser
personalizadas y extendidas según las necesidades del proyecto.
![]() |
Figure 1. Código HTML y Javascript de mapa, rutas y geolocalización - sybcodex.com |
Aviso sobre el contenido
Este
Blog no se hace responsable del mal uso de la información compartida, todo es
presentado solo con fines educativos y de entretenimiento.
Es
importante señalar que el contenido de este artículo tiene un enfoque
informativo y de entretenimiento, por lo que podría contener información que no
es verídica. Por esta razón, si tienes la intención de utilizar esta
publicación para hacer trabajos académicos o investigaciones, te recomiendo
encarecidamente que realices una exhaustiva investigación adicional. Es
fundamental que filtres los contenidos y verifiques la información mediante
fuentes académicas confiables, como revistas científicas y repositorios de alta
credibilidad.
El
contenido educativo aquí proporcionado no pretende sustituir el asesoramiento,
guía o enseñanza proporcionada por profesionales o instituciones
especializadas. Cualquier decisión o acción tomada por los lectores o usuarios
con base en la información presentada en este contenido es responsabilidad
exclusiva de cada individuo.
En
caso de que se requiera asesoramiento específico o experto en un área
particular, se alienta a los usuarios a buscar la orientación de profesionales
o expertos cualificados en el campo correspondiente.
Si
les sale error al ejecutar el código del programa o Query o script compartido
puede deberse a factores técnicos de software, tipeo, estructura de código,
versión o de librerías desfasadas.
Las
licencias de software libre y de código abierto permiten a los desarrolladores
utilizar y modificar el código fuente de un proyecto, lo que puede fomentar la
innovación y el avance tecnológico.
El
código, script, software y Query compartido en este post o publicación está
bajo licencia de software libre, y si lo llegan a compartir opcionalmente
pueden poner el nombre y la web del desarrollador <Sybcodex/>.
Referencias
DALL·E 2 (openai, 2023). Ilustración de
este artículo. [Figure 1]. Generado en https://openai.com/dall-e-2/
Redactor: Sybcodex (Joel
Sotelo Bustamante)
Categoría: Tecnología - ADMSoftCorp
Título del artículo: Código HTML y Javascript de mapa,
rutas y geolocalización - API de Google Maps
Número de edición: 1.0
Escrito en el año: 2024
-----------------------------------------------
Tienda online de libros: 👉 Book Sh💓p
©Todos
los derechos reservados al autor.
API Google Maps
Código HTML mapa
Computación e Informática
Integrar mapa web
Javascript geolocalización
Programación full stack
Rutas personalizadas
Tecnología informática
Tutorial crear mapa
- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
Comentarios
Publicar un comentario