google_map_path.html

<!DOCTYPE html>
<html>
<head>
<title>Draw a polyline given many coordinates</title>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>

<script>
    function initialize() {

        var coordinates = [[17.251586899999996, 78.41629870000001], [17.3615965, 78.42767459999999], [17.367224399999998, 78.4307278], [17.4117706, 78.4622003], [17.415007199999998, 78.49367420000002], [17.4483438, 78.52897270000001], [17.503054300000002, 78.54079759999999], [17.5449, 78.5718]];

        var avglat=0, avglng=0;

        for (var i = 0; i < coordinates.length; i++) { 
          avglat+=coordinates[i][0];
          avglng+=coordinates[i][1];
        }

        avglat/=coordinates.length;
        avglng/=coordinates.length;

        var homeLatlng = new google.maps.LatLng(avglat, avglng);
        var myOptions = {
            zoom: 15,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var arrCoords = [];

        for (var i = 0; i < coordinates.length; i++) { 
          arrCoords.push(new google.maps.LatLng(coordinates[i][0],coordinates[i][1]))
        }

        for (var i = 0; i < coordinates.length; i++) { 
              var marker = new google.maps.Marker({
              position: new google.maps.LatLng(coordinates[i][0], coordinates[i][1]),
              map: map,
            });
        }
        

        // draw the route on the map            
        var route = new google.maps.Polyline({
            path: arrCoords,
            strokeColor: "#00FF00",
            strokeOpacity: 1.0,
            strokeWeight: 4,
            geodesic: false,
            map: map
        }); 
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>