Login/Register
how to change the color of route in google maps v3
Asked Answered
Solved google-mapsgoogle-maps-api-3stroke
C

2

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 :)

Celebrate answered 26/9, 2013 at 8:9 Comment(0)
S
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>
Scientific answered 26/9, 2013 at 8:52 Comment(7)
I got an error saying that the colon after polylineOptions is unexpected. Can u check the code once again and suggest me something? – Celebrate
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. – Scientific
Is it possible to have a multicolored line? – Celebrate
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. – Scientific
check red color line in this image [wiki.zhuk.cc/index.php?title=File:GM-Tutorial-KML-Result.JPG] – Celebrate
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 – Scientific
For more options see PolylineOptions documentation – Leonoreleonsis
H
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();
Hove answered 31/8, 2014 at 4:19 Comment(1)
how to include "polylines (array)" and "polylineOptions" when generating static map? like: "maps-api-ssl.google.com/maps/api/staticmap?...." – Mure

© 2022 - 2024 — McMap. All rights reserved.