i'm expected output picture attached to him by sample google map.

given the following my leaflet map script. but cannot enable to achieve i will expected output.

enter image description here function single_vehicle_route(data){

            var latlng_val =[];

            var defaultCoords = [11.016844,76.955832];
                var StartMarker = {};
                var EndMarker = {};
                //set up our map
                var map = L.map('single_map').setView(defaultCoords,6);
                    maxZoom: 16

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

                var latlngs = [[data[i].lat,data[i].lng]];

                            var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);




2 Answers 2


Build up your list of latlngs and then add the polyline. In your code you're repeatedly adding a polyline of one point.

For example:

var latlngs = [];

for (i = 0; i < data.length; i++) {
   latlngs.push([data[i].lat, data[i].lng]);

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);


edit: To add markers at the beginning/end


For more information on custom markers, checkout the Leaflet documentation.


Polylines always draw the straight lines. So you didn't get the exact path. My suggestion is to use polyline.antPath instead of polyline

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.