Menu
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 :)
366
Click on the option labeled Tools and then click on Change map. Once there, click on the button labeled Change feature styles. There are plenty of options for changing the different styles of your markers, which includes changing their color.
To choose an alternate route, either click on a greyed-out route on the map or click on one of the other routes listed on the left-hand side menu. Note that you can also change routes by clicking on one and dragging it so that the directions will take you via certain roads.
In Google Earth, select your Area Feature Topic and click the + sign by it. Right-click on the specific Area Feature and select Properties. Use the “Style, Color” tab to change the Lines and Areas properties as desired.
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> 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(); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
