En 3 simples pasos, voy a explicar como agregar esta espectacular funcionalidad.
Primero, declarar variables globales antes de la funcion initialize() típica.
En mi caso quedaria así:
<script type="text/javascript">
var map;
var markersArray = [];
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
........
Luego dentro de la función de inicialización instanciamos:
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
//En mi casi como quiero trazar entre 2 markers mios desactivo los clasicos markers de A y B.
directionsDisplay.setOptions( { suppressMarkers: true } );
directionsDisplay.setMap(map);
//En mi casi como quiero trazar entre 2 markers mios desactivo los clasicos markers de A y B.
directionsDisplay.setOptions( { suppressMarkers: true } );
Por último agregamos una nueva funcion por fuera de initialize la cual llamaremos en el momento que necesitemos cargar una ruta, le pasamos 2 parametros, inicio y fin.
function calcRoute(start, end)
{
var start = start;
var end = end;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}
{
var start = start;
var end = end;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections(response);
}
});
}