Google Maps Multiple Polyline Colors

Hello I am trying to create a map that shows multiple driving routes on it. I need to color coat each route individually. The code below is working , but it only renders 1 line color. Any help would be appreciated.

Thanks

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
 <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #dvMap { height: 100%;width:100%; }
        </style>


</head>

<body>
   <div id="dvMap">
   </div>
      <script type="text/javascript">
   var markers = [
    
            {
               "title": 'Alibaug',
               "lat": '18.641400',
               "lng": '72.872200',
               "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.',
			   "color" : "#238C00"
           }
    
       ,
    
            {
               "title": 'Mumbai',
               "lat": '18.964700',
               "lng": '72.825800',
               "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.',
			   "color" : "#FF0000"
           }
    
       ,
    
            {
               "title": 'Pune',
               "lat": '18.523600',
               "lng": '73.847800',
               "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.',
			   "color" : "#0000FF"
           }
    
   ];
   </script>
   <script type="text/javascript">
 
       window.onload = function () {
           var mapOptions = {
               center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
               zoom: 12,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           var path = new google.maps.MVCArray();
           var service = new google.maps.DirectionsService();
 
           var infoWindow = new google.maps.InfoWindow();
           var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
         
		 var poly = new google.maps.Polyline({ map: map, strokeColor: markers[0].color });
		   
		   
           var lat_lng = new Array();
           for (i = 0; i < markers.length; i++) {
               var data = markers[i]
               var myLatlng = new google.maps.LatLng(data.lat, data.lng);
               lat_lng.push(myLatlng);
			  
               var marker = new google.maps.Marker({
                   position: myLatlng,
                   map: map,
                   title: data.title,
               });
               (function (marker, data) {
                   google.maps.event.addListener(marker, "click", function (e) {
                       infoWindow.setContent(data.description);
                       infoWindow.open(map, marker);
                   });
               })(marker, data);
           }
           for (var i = 0; i < lat_lng.length; i++) {
			   
               if ((i + 1) < lat_lng.length) {
                   var src = lat_lng[i];
                   var des = lat_lng[i + 1];
                   path.push(src);
                   poly.setPath(path);
                   service.route({
                       origin: src,
                       destination: des,
                       travelMode: google.maps.DirectionsTravelMode.DRIVING
                   }, function (result, status) {
                       if (status == google.maps.DirectionsStatus.OK) {
                           for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                               path.push(result.routes[0].overview_path[i]);
                           }
                       }
                   });
               }
           }
       }
   </script>

Open in new window

bradley525Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
Starting from the Google Simple Polylines example, I was able to modify the code to produce this map.  Apparently each polyline object has to be produced individually and can only have one line color:
http://iconoun.com/demo/temp_bradley525.php

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polylines</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
// This example creates a 2-pixel-wide three-color polyline showing
// the path of William Kingsford Smith's first trans-Pacific flight between
// Oakland, CA, and Brisbane, Australia.

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(0, -180),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var flightPlanCoordinates_1 = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
  ];
  var flightPath_1 = new google.maps.Polyline({
    path: flightPlanCoordinates_1,
    geodesic: true,
    strokeColor: 'blue',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  var flightPlanCoordinates_2 = [
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
  ];
  var flightPath_2 = new google.maps.Polyline({
    path: flightPlanCoordinates_2,
    geodesic: true,
    strokeColor: 'orange',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  var flightPlanCoordinates_3 = [
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath_3 = new google.maps.Polyline({
    path: flightPlanCoordinates_3,
    geodesic: true,
    strokeColor: 'darkgreen',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath_1.setMap(map);
  flightPath_2.setMap(map);
  flightPath_3.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Open in new window

HTH, ~Ray
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.