How to join all markers using paths in Google Maps?

Question

I am new to Google Maps (API) and I need to get the following result:

Right now I know how to display a map and place markers on it (based on longitude and latitude).

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 }); } 

The response variable is similar:

 [ 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 ] 

There could be many markers. I am looking for a way to join markers using paths, as in the preview image.

I don’t know what I should look for, and I need your help in this, guys. Thanks, advice!

Answer 1

Example from Google 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 }); 

Also see the reference entry for Polylines .

If you do not know how to map the response object to an array of LatLng objects, here is an example:

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