¿Cómo unir todos los marcadores con rutas en Google Maps?

Question

Soy nuevo en Google Maps (API) y que necesito para obtener el siguiente resultado:

Por el momento, sé cómo representar el mapa y colocar marcadores en el mismo (en base a la longitud y latitud).

var map; 

map = new google.maps.Map(document.getElementById('map_canvas'), { 
    zoom: 7, 
    center: new google.maps.LatLng(response[0].latitude, response[0].longitude), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

for (var i = 0; i < response.length; ++i) { 

    new google.maps.Marker({ 
     'map' : map, 
     'position' : new google.maps.LatLng(response[i].latitude, response[i].longitude), 
     'title' : response[i].address 
    }); 

} 

variable response estructura es como:

[ 
Object 
address: "Krišjāņa Barona iela 25, Riga, LV-1011, Latvia" 
latitude: "24.1245290" 
longitude: "56.9528510" 
__proto__: Object 
, 
Object 
address: "Rīgas iela 1, Tukums, Tukuma novads, LV-3101, Latvia" 
latitude: "23.1630590" 
longitude: "56.9663880" 
__proto__: Object 
] 

Podría haber una gran cantidad de marcadores. Estoy buscando una manera de unir marcadores con rutas como en la imagen de vista previa.

No sé para lo que debería buscar y necesito su ayuda para esto, muchachos. Gracias en un consejo!

Answer 1

Un ejemplo de Google's tutorial:

var flightPlanCoordinates = [ 
    new google.maps.LatLng(37.772323, -122.214897), 
    new google.maps.LatLng(21.291982, -157.821856), 
    new google.maps.LatLng(-18.142599, 178.431), 
    new google.maps.LatLng(-27.46758, 153.027892) 
    ]; 
    var flightPath = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

También, ver the reference entry for Polylines.

Si usted no sabe cómo asignar el objeto respuesta a una serie de objetos LatLng, he aquí un ejemplo:

var flightPath = responseArray.map(function (item) { 
    return new google.maps.LatLng(item.latitude, item.longitude); 
});