Anunciese Aquí

Registro automático

Acceder con Twitter

top articulo
twitter
facebook
Rss
viernes 05 de junio del 2020
Lea, publique artículos gratis, y comparta su conocimiento
Usuario Clave ¿Olvidó su clave?
¿Iniciar sesión automáticamente en cada visita?
Inserte su correo electronico

Trazar una ruta entre dos puntos con Google Maps

veces visto 2592 Veces vista   comentario 0 Comentarios

Trazar una ruta entre dos puntos con Google Maps

Hoy veremos como crear una aplicacion web para realizar el trazo de una ruta entre dos puntos con Google maps y el servicio de rutas de este. Al final de este articulo tendremos una aplicacion que nos permite mostrar la ruta mas correcta entre dos puntos que le especifique el usuario de nuestra aplicacion.

Lo primero es tener nuestro codigo html, simplemente tendremos 2 input text, 1 boton para mostrar la ruta y un div vacio en el cual mostraremos el mapa. Nuestro codigo clave es el siguiente:

Input A

<input id="input-ubicacion-a" type="text" class="form-control" placeholder="Ubicacion A" aria-describedby="sizing-addon2">

Input B

<input id="input-ubicacion-b" type="text" class="form-control" placeholder="Ubicacion B" aria-describedby="sizing-addon2">

Boton de Accion

<button id="btn-calcular-tiempo" type="button" class="btn btn-default" aria-label="Left Align"> <span class="glyphicon glyphicon-time" aria-hidden="true"> Calcular</span> </button> r   Div vacio para incrustrar el mapa   <div class="col-md-12"> <cent er><div id="map-canvas"></div></cent er> </div>   Y antes de cerrar la etiqueta body nuestro llamado a la api de google maps y nuestro archivo javascript donde escribiremos nuestro codigo fuente:   <scri pt src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> <script src="js/procesar.js"></script> r   Ahora pasemos a nuestro codigo javascript en nuestro archivo procesar.js.  Ten en cuenta los elementos con Ids que asignamos en nuestro html pues estos seran llamados desde nuestro codigo javascript con ayuda de Jquery.   Lo primero es declarar algunas variables que necesitaremos, var map; var geocoder; var bounds = new google.maps.LatLngBounds(); var markersArray = []; var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=B|00FF00|000000'; var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FFFF00|000000'; var ubicaciona; var ubicacionb;   Des pues escribimos el registro del evento principal al termino de la carga de nuestra app, // Al terminar de cargar la pagina llamamos al metodo initialize google.maps.event.addDomL istener(window, 'load', initialize);   lu ego la funcion initialize, // Funcion para inicializar el mapa function initialize() {   var opts = {     center: new google.maps.LatLng(20.6144226,-100.4057373),     zoom: 10   };   map = new google.maps.Map(document.getElementById('map-c anvas'), opts);   geocoder = new google.maps.Geocoder(); }

donde establecemos a donde mirara nuestro mapa y lo dibujamos dentro del div con el id map-canvas.

Despues asignamos los eventos para autocompletar nuestros input text, esto causara que al escribir en ellos nos muestren sugerencias de lugares

// Asignamos los input text a la funcion autocompletar de google  var inputa = document.getElementById("input-ubicacion-a&qu ot;); autocomplete = new google.maps.places.Autocomplete(inputa); & nbsp; var inputb = document.getElementById("input-ubicacion-b&qu ot;); autocomplete = new google.maps.places.Autocomplete(inputb); & nbsp; Ahora el metodo de click del boton, $("#btn-calcular-tiempo& quot;).click(function(event){ msg(" Calculando..<br />"); ubicaciona = $("#input-ubicacion-a").val(); ubicacionb = $("#input-ubicacion-b").val(); var service = new google.maps.DistanceMatrixService(); ser vice.getDistanceMatrix({ origins: [ubicaciona], destinations: [ubicacionb], travelMode: google.maps.TravelMode.DRIVING, unitSyst em: google.maps.UnitSystem.METRIC, avoidHigh ways:false, avoidTolls:false } ,callback); });   en este codigo llamamos al servicio DistanceMatrixService para obtener el tiempo de arrivo, la funcion msg es simplemente una funcion que escribe dentro de un div (hasta este punto no lo hemos, simplemente agrega un div con id div-resultado donde quieres que se escriban los mensajes) el codigo de esta funcion es: function msg(msg){   $('#div-resultado').html('<center&g t;' + msg + '</center>'); }

n y la funcion callback donde se recibe el resultado es como sigue:

function callback(respuesta, status) {   if (status != google.maps.DistanceMatrixStatus.OK) {     msg('Error: ' + status);   } else {     var origen = respuesta.originAddresses;     var destino = respuesta.destinationAddresses;       for (var i = 0; i < origen.length; i++) {       var results = respuesta.rows[i].elements;       addMarker(origen[i], false);       for (var j = 0; j < results.length; j++) {         msg('Desde ' + origen[i] + ' hasta ' + destino[j]             + ' son <code>' + results[j].distance.text + '</code> y el tiempo estimado es de <code>'             + results[j].duration.text + '</code><br />');       }     }     addPath();   } }   Por ultimo la funcion addPath nos ayuda a pintar la trayectoria de nuestra ruta de estos dos puntos que el usuario escriba en las cajas de texto,  function addPath(){   var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});   var directionService = new google.maps.DirectionsService();   r   directionsDisplay.setMap(map);   n   directionService.route({     origin: ubicaciona,     destination: ubicacionb,     travelMode: google.maps.TravelMode.DRIVING,     unitSystem: google.maps.UnitSystem.METRIC,     provideRouteAlternatives: false,     avoidHighways: false,     avoidTolls: false   },function(result, status){     if(status == google.maps.DirectionsStatus.OK){       directionsDisplay.setDirections(result);     }   }); }   Al final tendremos una linda aplicacion web que es capaz de trazar una ruta entre dos puntos con google maps.   Cualquier duda o comentario estare encantado de resolverla. Saludos!

Clasificación: 3.1 (12 votos)
Está prohibido copiar este artículo. Artículo.org no permite la sindicación de sus artículos.
Acerca del autor

Ingeniero en Sistemas Computacionales, Programador, Desarrollador Web, Blogger y mas. Autor en un Blog de Programacion.

¿Tiene comentarios o preguntas para el autor?

Lo sentimos, pero no podemos procesar su petición en este momento. Por favor pruebe mas tarde. Si el problema persiste, puede contactar con nosotros pinchando sobre el enlace aquí.