• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3267
  • Last Modified:

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

0
bradley525
Asked:
bradley525
1 Solution
 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now