title: how to change color of the direction path in google maps v3
body: <p>hi i'm working on map <a href="http://gidzior.net/map/v3_animate_marker_directions.html">http://gidzior.net/map/v3_animate_marker_directions.html</a> which shows line from start to end point. I would like to change color of this line, could any one help me ? I thought that might help change these values, but none of this works.</p>
  
  <pre><code>polyline = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
      });
      poly2 = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
      });
  </code></pre>
  
  <p>GM SCRIPT</p>
  
  <pre><code>var map;
    var directionDisplay;
    var directionsService;
    var stepDisplay;
    var markerArray = [];
    var position;
    var marker = null;
    var polyline = null;
    var poly2 = null;
    var speed = 0.0000005, wait = 1;
    var infowindow = null;
    var zoomed;
    var zoomedd;
    var zoomeddd;
  
    var step = 50; // 5; // metres
  
    var myPano;   
    var panoClient;
    var nextPanoId;
    var timerHandle = null;
  
    var size = new google.maps.Size(26,25);
    var start_point = new google.maps.Point(0,0);
    var foothold = new google.maps.Point(13,15);
  
    var car_icon = new google.maps.MarkerImage("http://gidzior.net/map/car.png", size, start_point, foothold);
  
    var size2 = new google.maps.Size(87,87);
    var start_point2 = new google.maps.Point(0,0);
    var foothold2 = new google.maps.Point(43,87);
  
    var endIcon = new google.maps.MarkerImage("http://gidzior.net/map/end.png", size2, start_point2, foothold2);
  
  function createMarker(latlng, label, html) {
  // alert("createMarker("+latlng+","+label+","+html+","+color+")");
      var contentString = '&lt;b&gt;'+label+'&lt;/b&gt;&lt;br&gt;'+html;
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          icon: car_icon,
          clickable: false,
          zIndex: Math.round(latlng.lat()*-100000)&lt;&lt;5
          });
      return marker;
  }
  
  function createEndMarker(latlng, label, html) {
      var contentString = '&lt;b&gt;'+label+'&lt;/b&gt;&lt;br&gt;'+html;
      var marker = new google.maps.Marker({
          position: latlng,
          map: map,
          icon: endIcon,
          clickable: false,
          zIndex: Math.round(latlng.lat()*-100000)&lt;&lt;5
          });
      return marker;
  }
  
  function initialize() {
    infowindow = new google.maps.InfoWindow(
      { 
        size: new google.maps.Size(150,50)
      });
      // Instantiate a directions service.
      directionsService = new google.maps.DirectionsService();
  
      // Create a map and center it on Warszawa.
      var myOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: 
          {
              style: google.maps.NavigationControlStyle.SMALL 
          }
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
      address = 'warszawa'
      geocoder = new google.maps.Geocoder();
      geocoder.geocode( { 'address': address}, function(results, status) {
         map.setCenter(results[0].geometry.location);
      });
  
      // Create a renderer for directions and bind it to the map.
      var rendererOptions = {
        map: map,
      }
      directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  
      // Instantiate an info window to hold step text.
      stepDisplay = new google.maps.InfoWindow();
  
      polyline = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
      });
      poly2 = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
      });
    }
  
  
  
      var steps = []
  
      function calcRoute(){
  
  if (timerHandle) { clearTimeout(timerHandle); }
  if (marker) { marker.setMap(null);}
  polyline.setMap(null);
  poly2.setMap(null);
  directionsDisplay.setMap(null);
      polyline = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
      });
      poly2 = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
      });
      // Create a renderer for directions and bind it to the map.
      var rendererOptions = {
        map: map,
        suppressMarkers:true
      }
  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  
          var start = document.getElementById("start").value;
          var end = document.getElementById("end").value;
          var travelMode = google.maps.DirectionsTravelMode.DRIVING
  
          var request = {
              origin: start,
              destination: end,
              travelMode: travelMode,
              waypoints: [{
                  location:new google.maps.LatLng(52.185570, 20.997255),
                  stopover:false}],
              optimizeWaypoints: false
          };
  
          // Route the directions and pass the response to a
          // function to create markers for each step.
      directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK){
          directionsDisplay.setDirections(response);
  
              var bounds = new google.maps.LatLngBounds();
              var route = response.routes[0];
              startLocation = new Object();
              endLocation = new Object();
  
              // For each route, display summary information.
          var path = response.routes[0].overview_path;
          var legs = response.routes[0].legs;
              for (i=0;i&lt;legs.length;i++) {
                if (i == 0) { 
                  startLocation.latlng = legs[i].start_location;
                  startLocation.address = legs[i].start_address;
                  //marker = google.maps.Marker({map:map,position: startLocation.latlng});
                  marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
                }
                endLocation.latlng = legs[i].end_location;
                endLocation.address = legs[i].end_address;
                var steps = legs[i].steps;
                for (j=0;j&lt;steps.length;j++) {
                  var nextSegment = steps[j].path;
                  for (k=0;k&lt;nextSegment.length;k++) {
                    polyline.getPath().push(nextSegment[k]);
                    bounds.extend(nextSegment[k]);
                  }
                }
              }
  
              polyline.setMap(map);
              document.getElementById("distance").innerHTML = (polyline.Distance()/1000).toFixed(2)+" km";
              map.fitBounds(bounds);
              createEndMarker(endLocation.latlng,"end",endLocation.address,"red");
              map.setZoom(18);
              startAnimation();
              zoomed=false;
              zoomedd=false;
              zoomeddd=false;
              step = 50;
              }                                                    
          });
      }
  
  
        var tick = 100; // milliseconds
        var eol;
        var k=0;
        var stepnum=0;
        var speed = "";
        var lastVertex = 1;
  
  
  
  
  //=============== animation functions ======================
        function updatePoly(d) {
          // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
          if (poly2.getPath().getLength() &gt; 20) {
            poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]);
            // map.addOverlay(poly2)
          }
  
          if (polyline.GetIndexAtDistance(d) &lt; lastVertex+2) {
             if (poly2.getPath().getLength()&gt;1) {
               poly2.getPath().removeAt(poly2.getPath().getLength()-1)
             }
             poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d));
          } else {
            poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng);
          }
        }
  
  
        function animate(d) {
  // alert("animate("+d+")");
          if (d&gt;eol) {;
            map.panTo(endLocation.latlng);
            marker.setPosition(endLocation.latlng);
            return;
          }
          if (d&gt;eol-20000 &amp;&amp; zoomeddd!=true) {
            map.setZoom(12); // or whatever value
            zoomeddd=true;
          }
          if (d&gt;eol-10000 &amp;&amp; zoomedd!=true) {
            map.setZoom(13); // or whatever value
            zoomedd=true;
          }
          if (d&gt;eol-1500 &amp;&amp; zoomed!=true) {
            map.setZoom(15); // or whatever value
            step = 15;
            zoomed=true;
          }
          var p = polyline.GetPointAtDistance(d);
          map.panTo(p);
          marker.setPosition(p);
          updatePoly(d);
          timerHandle = setTimeout("animate("+(d+step)+")", tick);
        }
  
  
  function startAnimation() {
          eol=polyline.Distance();
          map.setCenter(polyline.getPath().getAt(0));
          // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON));
          // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON));
          // map.addOverlay(marker);
          poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10});
          // map.addOverlay(poly2);
          setTimeout("animate(50)",2000);  // Allow time for the initial map display
  }
  </code></pre>