Hi, I am working on a http://gidzior.net/map/v3_animate_marker_directions.html map that shows a line from start to finish. I would like to change the color of this line, can someone help me? I thought this 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 }