Google Maps Api - drawing routes from an array of points

Question

I would like to connect 8 points on a Google map so that they share a line (road). I would like to click on a point cloud with a description of this point. The goal is to show the route that the point of the car points to.

I have a script to make a map with dots, but I don't know how to connect the markers.

var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; var MY_MAPTYPE_ID = 'custom_style'; function initialize() { if (jQuery('#map').length > 0) { var locations = jQuery.parseJSON(MapPoints); window.map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }); var infowindow = new google.maps.InfoWindow(); var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), map: map }); bounds.extend(marker.position); google.maps.event.addListener(marker, 'click', (function (marker, i) { return function () { infowindow.setContent(locations[i]['title']); infowindow.open(map, marker); } })(marker, i)); } map.fitBounds(bounds); 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 }); var flightPath = responseArray.map(function (item) { return new google.maps.LatLng(item.latitude, item.longitude); }); var listener = google.maps.event.addListener(map, "idle", function () { map.setZoom(12); google.maps.event.removeListener(listener); }); } } google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

• to connect tokens with google.maps.Polyline (as you seem to be trying to do).

  • create an empty array: var flightPlanCoordinates = [];

  • point the coordinates of their markers (google.maps.LatLng objects) into the coordinate array that you use for the polyline: flightPlanCoordinates.push(marker.getPosition());

  • set the map option for the polyline: map:map (in the PolylineOptions object).

     var flightPath = new google.maps.Polyline({ map: map, path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); 

working violin

snippet of working code:

 var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; var MY_MAPTYPE_ID = 'custom_style'; function initialize() { if (jQuery('#map').length > 0) { var locations = jQuery.parseJSON(MapPoints); window.map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }); var infowindow = new google.maps.InfoWindow(); var flightPlanCoordinates = []; var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), map: map }); flightPlanCoordinates.push(marker.getPosition()); bounds.extend(marker.position); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i]['title']); infowindow.open(map, marker); } })(marker, i)); } map.fitBounds(bounds); var flightPath = new google.maps.Polyline({ map: map, path: flightPlanCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map { height: 500px; width: 500px; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="map" style="border: 2px solid #3872ac;"></div> 

• to connect the points using the directions service (from the example you specified )

  • create an empty array: var flightPlanCoordinates = [];

  • point the coordinates of their markers (google.maps.LatLng objects) into the coordinate array that you use for the polyline: flightPlanCoordinates.push(marker.getPosition());

  • use this array to populate the start , end and waypts in the calcRoute function:

     var start = flightPlanCoordinates[0]; var end = flightPlanCoordinates[flightPlanCoordinates.length - 1]; var waypts = []; for (var i = 1; i < flightPlanCoordinates.length - 1; i++) { waypts.push({ location: flightPlanCoordinates[i], stopover: true }); } calcRoute(start, end, waypts); 

  • change the calcRoute function to use these arguments:

     function calcRoute(start, end, waypts) { var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; 

working violin

snippet of working code:

 var MapPoints = '[{"address":{"address":"plac Grzybowski, Warszawa, Polska","lat":"52.2360592","lng":"21.002903599999968"},"title":"Warszawa"},{"address":{"address":"Jana Paw\u0142a II, Warszawa, Polska","lat":"52.2179967","lng":"21.222655600000053"},"title":"Wroc\u0142aw"},{"address":{"address":"Wawelska, Warszawa, Polska","lat":"52.2166692","lng":"20.993677599999955"},"title":"O\u015bwi\u0119cim"}]'; var MY_MAPTYPE_ID = 'custom_style'; var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true }); if (jQuery('#map').length > 0) { var locations = jQuery.parseJSON(MapPoints); map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false }); directionsDisplay.setMap(map); var infowindow = new google.maps.InfoWindow(); var flightPlanCoordinates = []; var bounds = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng), map: map }); flightPlanCoordinates.push(marker.getPosition()); bounds.extend(marker.position); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i]['title']); infowindow.open(map, marker); } })(marker, i)); } map.fitBounds(bounds); // directions service configuration var start = flightPlanCoordinates[0]; var end = flightPlanCoordinates[flightPlanCoordinates.length - 1]; var waypts = []; for (var i = 1; i < flightPlanCoordinates.length - 1; i++) { waypts.push({ location: flightPlanCoordinates[i], stopover: true }); } calcRoute(start, end, waypts); } } function calcRoute(start, end, waypts) { var request = { origin: start, destination: end, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); var route = response.routes[0]; var summaryPanel = document.getElementById('directions_panel'); summaryPanel.innerHTML = ''; // For each route, display summary information. for (var i = 0; i < route.legs.length; i++) { var routeSegment = i + 1; summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>'; summaryPanel.innerHTML += route.legs[i].start_address + ' to '; summaryPanel.innerHTML += route.legs[i].end_address + '<br>'; summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; } } }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map { height: 500px; width: 500px; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <div id="map" style="border: 2px solid #3872ac;"></div> <div id="directions_panel"></div>