Publicaci贸n destacada

C贸digo HTML y Javascript de mapa, rutas y geolocalizaci贸n - API de Google Maps 馃捇

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
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.


Comentarios

Nuestras redes sociales

Entradas relacionadas

Contenido relacionado