Anunciese Aquí

Registro automático

Acceder con Twitter

top articulo
twitter
facebook
Rss
viernes 29 de marzo del 2024
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 3989 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: 2.9 (15 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?
Artículos recomendados
Diseño Web para niños
Escrito por Zerep, Añadido: 01 de Mar, 2011
El diseño web para los niños es una experiencia fascinante, desafiante y gratificante, además de exasperante. Aquí se está tratando de crear una experiencia digital para personas que aún carecen de la capacidad cognitiva para entender la abstracción. En el diseño web para niños se tratando de establecer...
veces visto 2655 Veces vista:   comentarios 0 Comentarios
Pasos necesarios para ejecutar un programa en una computadora
Escrito por Carlos Pes, Añadido: 13 de Ene, 2011
Suponiendo que en el disco duro de un PC esté guardado un programa que sirva para realizar la suma de dos números enteros cualesquiera (por ejemplo, del 3 y el 5), si alguien quiere realizar una suma con dicho programa, deberá seguir, como mínimo, los siguientes cinco pasos: 1. Encender el ordenador....
veces visto 5958 Veces vista:   comentarios 0 Comentarios
Protesta de GOOGLE por acuerdo de APPLE con los programadores
Escrito por Leonel Morales, Añadido: 24 de Jun, 2010
Google dijo el miércoles 09/junio/2010 que los recientes cambios en el acuerdo entre su rival Apple y los desarrolladores de aplicaciones bloquearán las herramientas de publicidad de Google para el popular iPhone, creando barreras "artificiales" para la competencia Apple modificó la redacción del...
veces visto 1611 Veces vista:   comentarios 0 Comentarios
Introducción a PHP
Escrito por Hugo Gómez, Añadido: 22 de Abr, 2010
¿Qué es PHP? PHP significa “PHP: Hypertext Preprocessor”. PHP es un lenguaje de script del lado del servidor para crear páginas Web dinámicas. Crear scripts PHP para realizar un seguimiento de las actividades de los visitantes en el sitio, enviar correos electrónicos a los clientes, que los usuarios...
veces visto 3374 Veces vista:   comentarios 0 Comentarios
Pasos fundamentales para comenzar a programar
Escrito por Javi Pizarro , Añadido: 17 de Mar, 2011
Te voy a mostrar el error más común que comenten el 90% de las personas que deciden aprender a programar. Si tú eres capaz de evitar este error y enfocar tus energías a lo que te voy a proponer, vas a ser capaz de dar tus primeros pasos para programar y de ponerte en acción sin dudarlo y sin...
veces visto 2907 Veces vista:   comentarios 0 Comentarios