Maps API v3 Directions change polyline color

by upsidown

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
click on map to change the polyline color

CSS

body {
  font-family: Arial;
}

#map-canvas {
  height: 400px;
  margin-bottom: 20px;
}

JavaScript

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {

  var rendererOptions = {
    map: map,
    suppressMarkers: false,
    polylineOptions: {
      strokeColor: 'red'
    }
  };

  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = "Lafayette Avenue 212, New York City";
  var end = "Myrtle Avenue 11612, New York City";
  var method = 'DRIVING';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

  google.maps.event.addListener(map, 'click', function() {

    directionsDisplay.setMap(null);

    directionsDisplay.setOptions({
      polylineOptions: {
        strokeColor: 'blue'
      }
    });

    directionsDisplay.setMap(map);
  });
}

initialize();