Question

I am trying to create a polyline from google maps v3 api. I know how add polyline on click but i want to create polyline from latitude & longitude value which will be in loop. How can i do that ?

    var network_url = decodeURIComponent(document.URL);
    //var network_url = " http://testNetwork.com?param[]=(12.983147333223707, 77.49687217431642)&param[]=(12.95035965289418, 77.54871391015627)";

    var location_array = split_url(network_url);
    for(var i = 0; i<location_array.length; i++)
    {

         //(12.960062579720846,%2077.48313926416017)
        var loc = location_array[i] ; //==>(12.77,  24.87)

        var split_arr1 = loc.split("(");
        var result_split_arr1 = split_arr1[1].split( ")" );

        var split_latLon = result_split_arr1[0];
        var result_split = split_latLon.split(",");

        var split_lat = result_split[0];
        var split_lon = result_split[1];

        marker = new google.maps.Marker({
        position: new google.maps.LatLng(split_lat, split_lon),
        map: map
        });



        ///////////POLYLINE DRAWing /////////////////////////////

        /////////////END OF POLYLINE ////////////////////


     }


}

thank you.

Answer 1

Check out the documentation for the polyline. It takes an array of LatLng’s.

Loop through your and points, throw them in an array, and pass them to the PolyLine through the constructor or .setPath().

https://developers.google.com/maps/documentation/javascript/reference#Polyline

Edit: Example. (I didn’t run it).

    var location_array = split_url(network_url);
    var path = [];
    for(var i = 0; i<location_array.length; i++)
    {

         //(12.960062579720846,%2077.48313926416017)
        var loc = location_array[i] ; //==>(12.77,  24.87)

        var split_arr1 = loc.split("(");
        var result_split_arr1 = split_arr1[1].split( ")" );

        var split_latLon = result_split_arr1[0];
        var result_split = split_latLon.split(",");

        var split_lat = result_split[0];
        var split_lon = result_split[1];
        var latLng = new google.maps.LatLng(split_lat, split_lon);
        path.push(latLng)
        marker = new google.maps.Marker({
        position: latLng,
        map: map
        });

     }

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

}