1 nov. 2012

Como dibujar rutas en Google maps

Tutorial PHP: Como dibujar rutas en google maps

Google maps es el servicio de mapas de Google que ofrece imágenes vía satélite de todo el planetas junto con mapas de casi todas las ciudades de aquellos países que han colaborado y permiten que Google muestre a los millones de usuarios que utilizan este servicio gratuito de Google.

A continuación mostraremos un ejemplo práctico sobre como dibujar rutas en Google maps utilizando coordenadas o direcciones indistintamente.

Ejemplo: Como dibujar rutas en Google maps.



Para realizar el ejemplo sobre como dibujar rutas en Google maps utilizaremos dos clases básicas:

DirectionsServiceDirectionsRenderer : Donde la primera es la que realiza la petición del servicio al servidor y devuelve los datos y la segunda la encargada de mostrar la ruta seleccionada en nuestro mapa.

1) En primer lugar deberemos inicializar:
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

2) En segundo lugar crearemos un objeto del tipo Request de la siguiente manera:
var request = {
 origin:start,
 destination:end,
 travelMode: google.maps.DirectionsTravelMode.DRIVING
};

3) En tercer lugar llamamos a la función que dibuja la ruta en Google maps
directionsService.route(request, function(result, status) {
   if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setMap(map);
      var mystr="";
      for(var i in result.routes){
         var mylegs=result.routes[i].legs
         for(var j in mylegs){
            mystr += mylegs[j].distance.text;
            mystr += " " + mylegs[j].duration.text+ " <br/> ";
         }
         mystr+=" <br/>";
         $(“#infoRecorrido).html(mystr);
      }
      directionsDisplay.setDirections(result);
   }
});


4) En este punto ya tenemos el ejemplo finalizado y estamos en disposición de dibujar rutas en Google maps.

El resultado de dibujar rutas con Google maps es el siguiente:



Si te ha gustado el artículo sobre cómo corregir error "Apache shutdown unexpectedly" al iniciar Xampp te pido un favor: Haz clic sobre uno de los anuncios, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha