Publicación destacada

Código HTML y Javascript de mapa, rutas y geolocalización - API de Google Maps 💻

el

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

Publicar un comentario

Nuestras redes sociales

Entradas relacionadas

Contenido relacionado