1

Buenas, quiero saber por donde empezar a investigar para crear una ruta en el mapa de Google, pero deseo hacer una ruta a conveniencia, osea que no se optimizada por Google, es para indicar la ruta de un BUS de transporte publico. Gracias

2
  • 1
    Empieza por aprender la API de Google Maps por ejemplo :D
    – fredyfx
    el 21 feb. 2017 a las 20:54
  • 1
    Aquí puedes ver un ejemplo de como usar waypoints combiando con el servicio de directions.
    – Marcos
    el 21 feb. 2017 a las 20:59

2 respuestas 2

4

Bueno,

Puede utilizar el servicio de Google Maps API, llamado Directions, donde puedes indicarle un punto (ya sea por nombre o por coordenada) de inicio y un punto final.

Edito: 29 puntos por 23 waypoints e indico la cantidad de puntos disponibles para la versión gratuita del servicio

Si quieres indicarle que entre esos puntos respete algunos intermedio podrás usar waypoints, donde tienes hasta 23 puntos disponibles para la versión pagada y 8 para la versión gratuita, para agregar a la ruta, y lo que hará este servicio es que se moverá por los puntos indicados hasta llegar al punto final.

Aquí hay un ejemplo desde la misma pagina de Google Maps API, donde esta lo que te indico.

https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

Saludos,

2
  • pensaba (pero puedo estar equivocado) que los 29 puntos son sólo para el API pagada, y que la versión gratuita ofrece sólo 8 waypoints
    – ffflabs
    el 21 feb. 2017 a las 22:27
  • Toda la razón @amenadiel los puntos para la versión gratuita son solo 8 y no los 29 expuestos en la respuesta que por lo demás lo corrijo ya que son solo 23.
    – jolsalazar
    el 22 feb. 2017 a las 13:23
3

Complementando la informacion de jolsalazar te dejo un ejemplo mas simple que el de la documentacion de Google

function initdMap() {
        //get api uses
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        //waypoints to add
        var waypts = [{ location: { lat: 41.94, lng: 1.56 }, stopover: true }, { location: { lat: 41.99, lng: 1.53 }, stopover: true }, { location: { lat: 41.98, lng: 1.52 }, stopover: true }];

        //api map
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: { lat: waypts[0].location.lat, lng: waypts[0].location.lng }
        });
        //add map
        directionsDisplay.setMap(map);

        // set the new
        //new Array(waypts[0].location.lat,waypts[0].location.lng)
        directionsService.route({
            origin: { lat: waypts[0].location.lat, lng: waypts[0].location.lng },//db waypoint start
            destination: { lat: waypts[0].location.lat, lng: waypts[0].location.lng },//db waypoint end
            waypoints: waypts,
            travelMode: google.maps.TravelMode.WALKING
        }, function (response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                window.alert('Ha fallat la comunicació amb el mapa a causa de: ' + status);
            }
        });
    }

Mi recomendación es que uses un mapeado jQuery de la API de google como por ejemplo GMaps https://hpneo.github.io/gmaps/

function initMap() {
        //get api uses
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;

        var waypts = [{ location: { lat: 41.94, lng: 1.56 }, stopover: true },
            { location: { lat: 41.99, lng: 1.53 }, stopover: true },
            { location: { lat: 41.98, lng: 1.52 }, stopover: true }];

        var mapa = new GMaps({
            el: '#map',
            lat: waypts[0].location.lat,
            lng: waypts[0].location.lng,
            zoom: 4
        });
        mapa.drawRoute({
            origin: [waypts[0].location.lat, waypts[0].location.lng],
            destination: [waypts[waypts.length - 1].location.lat, waypts[waypts.length - 1].location.lng],
            travelMode: 'walking',
            strokeColor: '#0054c2',
            strokeOpacity: 0.6,
            strokeWeight: 6
        });
    }
1
  • gracias amigo genial el 24 feb. 2017 a las 15:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.