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 respuestas
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,
-
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– ffflabsCommented 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. Commented el 22 feb. 2017 a las 13:23
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
});
}
waypoints
combiando con el servicio dedirections
.