31

I am using this code to get directions between two points. Is it possible to change the color of the route from blue? I am not using polyline in my code.

Thanx in advance :)

user2809895
  • 331
  • 1
  • 3
  • 8

2 Answers2

56

You can specify the color of the line when you create the DirectionsRenderer, using the optional DirectionsRendererOptions struct.

This works for me, simply changing the line where the DirectionsRenderer object is created:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: "red"
    }
  });

  var mapOptions = {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: {lat: 41.850033, lng: -87.6500523}
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="panel">
    <b>Start: </b>
    <select id="start" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    <b>End: </b>
    <select id="end" onchange="calcRoute();">
      <option value="chicago, il">Chicago</option>
      <option value="st louis, mo">St Louis</option>
      <option value="joplin, mo">Joplin, MO</option>
      <option value="oklahoma city, ok">Oklahoma City</option>
      <option value="amarillo, tx">Amarillo</option>
      <option value="gallup, nm">Gallup, NM</option>
      <option value="flagstaff, az">Flagstaff, AZ</option>
      <option value="winona, az">Winona</option>
      <option value="kingman, az">Kingman</option>
      <option value="barstow, ca">Barstow</option>
      <option value="san bernardino, ca">San Bernardino</option>
      <option value="los angeles, ca">Los Angeles</option>
    </select>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>
duncan
  • 31,401
  • 13
  • 78
  • 99
  • I got an error saying that the colon after polylineOptions is unexpected. Can u check the code once again and suggest me something? – user2809895 Sep 26 '13 at 10:07
  • Works for me; I'll update my answer with the full code I used. You might want to add your code to your question, in case there's a syntax error we can spot. – duncan Sep 26 '13 at 10:39
  • Is it possible to have a multicolored line? – user2809895 Sep 26 '13 at 10:53
  • Can you show me an example of what you mean? I don't think you'd be able to do it with polylines, I think it can be done with custom overlay tiles instead, but that's beyond my knowledge. – duncan Sep 26 '13 at 11:00
  • check red color line in this image [http://wiki.zhuk.cc/index.php?title=File:GM-Tutorial-KML-Result.JPG] – user2809895 Sep 26 '13 at 11:11
  • ah, in this case you're actually seeing two different lines, just one adjoins the other. And instead of using the DirectionsService, they're using KML to draw the lines. You could use KML too, or try using Polylines instead – duncan Sep 26 '13 at 12:11
  • For more options see [PolylineOptions documentation](https://developers.google.com/maps/documentation/javascript/reference?csw=1#PolylineOptions) – Mladen Janjetovic Aug 06 '15 at 15:04
14

you can change the color by changing the stroke color :) as simple as that

    directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer({ polylineOptions: { strokeColor: "#8b0013" } });
    directionsDisplay.setMap(map);
    directionsDisplay.setOptions({ suppressMarkers: true });


        calcRoute();
Manikandan Selvanathan
  • 885
  • 10
  • 20
  • how to include "polylines (array)" and "polylineOptions" when generating static map? like: "https://maps-api-ssl.google.com/maps/api/staticmap?...." – aldrien.h Oct 12 '17 at 04:59