I am using Javascript in html page to display GPS locations with markers and all these GPS locations are connected by polyline using driving mode. All the markers are being displayed in the output but polyline is not working properly.
The issue is, only few locations are connected by polylines and few of the them are being skipped without connecting .Anyone could point out where the issue is ?
html code
The directions service is subject to a quota and a rate limit. You aren't checking the status returned by the service (OVER_QUERY_LIMIT)
You might want to use waypoints (up to 8 are supported in a single directions request with the free API), you currently only have 20 points, you should be able to do the route with 3 requests.
See the example in this related question:Google Maps API to get bus route
service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { for (var i = 0, len = result.routes[0].overview_path.length; i "; } }); working fiddle (based off of example in this answer)
code snippet:
jQuery(function() { var msg = "41.077354,-81.511337:41.080647,-81.516579:41.077435,-81.521561:41.075253,-81.521492:41.074604,-81.520309:41.07415,-81.516335:41.073158,-81.514931:41.070534,-81.516563:41.066677,-81.516502:41.063942,-81.516502:41.06514,-81.513458:41.067383,-81.513412:41.069546,-81.513397:41.070778,-81.513382:41.072514,-81.512619:41.071106,-81.507614:41.073326,-81.506195:41.075886,-81.506058:41.077274,-81.507652:41.077354,-81.511337"; var input_msg = msg.split(":"); var map = new window.google.maps.Map(document.getElementById("dvMap")); // new up complex objects before passing them around var directionsDisplay = new window.google.maps.DirectionsRenderer({ suppressMarkers: true }); var directionsService = new window.google.maps.DirectionsService(); Tour_startUp(input_msg); window.tour.loadMap(map, directionsDisplay); window.tour.fitBounds(map); if (input_msg.length > 1) window.tour.calcRoute(directionsService, directionsDisplay); }); function Tour_startUp(stops) { if (!window.tour) window.tour = { updateStops: function(newStops) { stops = newStops; }, // map: google map object // directionsDisplay: google directionsDisplay object (comes in empty) loadMap: function(map, directionsDisplay) { var myOptions = { zoom: 13, center: new window.google.maps.LatLng(51.507937, -0.076188), // default to London mapTypeId: window.google.maps.MapTypeId.ROADMAP }; map.setOptions(myOptions); directionsDisplay.setMap(map); }, fitBounds: function(map) { var bounds = new window.google.maps.LatLngBounds(); // extend bounds for each record jQuery.each(stops, function(key, val) { var latlng = val.split(","); var myLatlng = new window.google.maps.LatLng(latlng[0], latlng[1]); bounds.extend(myLatlng); }); map.fitBounds(bounds); }, calcRoute: function(directionsService, directionsDisplay) { var batches = []; var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints var itemsCounter = 0; var wayptsExist = stops.length > 0; while (wayptsExist) { var subBatch = []; var subitemsCounter = 0; for (var j = itemsCounter; j " + legs[i].start_address, markerletter); } var i = legs.length; var markerletter = "A".charCodeAt(0); markerletter += i; markerletter = String.fromCharCode(markerletter); createMarker(directionsDisplay.getMap(), legs[legs.length - 1].end_location, "marker" + i, "some text for the " + i + "marker
" + legs[legs.length - 1].end_address, markerletter); } } }); })(k); } } }; } var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(150, 50) }); var icons = new Array(); icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 9,34. new google.maps.Point(9, 34)); function getMarkerImage(iconStr) { if ((typeof(iconStr) == "undefined") || (iconStr == null)) { iconStr = "red"; } if (!icons[iconStr]) { icons[iconStr] = new google.maps.MarkerImage("http://www.google.com/mapfiles/marker" + iconStr + ".png", // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 6,20. new google.maps.Point(9, 34)); } return icons[iconStr]; } // Marker sizes are expressed as a Size of X,Y // where the origin of the image (0,0) is located // in the top left of the image. // Origins, anchor positions and coordinates of the marker // increase in the X direction to the right and in // the Y direction down. var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png', // This marker is 20 pixels wide by 34 pixels tall. new google.maps.Size(20, 34), // The origin for this image is 0,0. new google.maps.Point(0, 0), // The anchor for this image is at 9,34. new google.maps.Point(9, 34)); var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png', // The shadow image is larger in the horizontal dimension // while the position and offset are the same as for the main image. new google.maps.Size(37, 34), new google.maps.Point(0, 0), new google.maps.Point(9, 34)); // Shapes define the clickable region of the icon. // The type defines an HTML <area> element 'poly' which // traces out a polygon as a series of X,Y points. The final // coordinate closes the poly by connecting to the first // coordinate. var iconShape = { coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0], type: 'poly' }; function createMarker(map, latlng, label, html, color) { // alert("createMarker("+latlng+","+label+","+html+","+color+")"); var contentString = '' + label + '
' + html; var marker = new google.maps.Marker({ position: latlng, map: map, shadow: iconShadow, icon: getMarkerImage(color), shape: iconShape, title: label, zIndex: Math.round(latlng.lat() * -100000) "; for (i = 0; i "; } }); } } } // google.maps.event.addDomListener(window, 'load', Call2function);html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px }