Question

hi i’m working on map http://gidzior.net/map/v3_animate_marker_directions.html 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.

polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });
    poly2 = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
    });

GM SCRIPT

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 = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: car_icon,
        clickable: false,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
    return marker;
}

function createEndMarker(latlng, label, html) {
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: endIcon,
        clickable: false,
        zIndex: Math.round(latlng.lat()*-100000)<<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<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<steps.length;j++) {
                var nextSegment = steps[j].path;
                for (k=0;k<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() > 20) {
          poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]);
          // map.addOverlay(poly2)
        }

        if (polyline.GetIndexAtDistance(d) < lastVertex+2) {
           if (poly2.getPath().getLength()>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>eol) {;
          map.panTo(endLocation.latlng);
          marker.setPosition(endLocation.latlng);
          return;
        }
        if (d>eol-20000 && zoomeddd!=true) {
          map.setZoom(12); // or whatever value
          zoomeddd=true;
        }
        if (d>eol-10000 && zoomedd!=true) {
          map.setZoom(13); // or whatever value
          zoomedd=true;
        }
        if (d>eol-1500 && 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
}

Answer 1

add this to rendererOptions:

polylineOptions:{strokeColor:'someValidCSSColorValue'}

the polylineOptions-member of the DirectionsRendererOptions-object accepts any polylineOption