title: offset google map DirectionsService polyline
body: <p>I have two polylines drawn on a google maps api v3 directions service.</p>
  
  <p>My problem is that where they overlap on part of the map, one covers the others. I wish to draw 6 lines in total which are bus routes in my city. All routes come back to the same area of the city but it will be very difficult to distinguish them apart.</p>
  
  <p>Is there a way to slightly offset each line?</p>
  
  <pre><code>function busRoute2(source,destination){
          // show route between the points
          directionsService = new google.maps.DirectionsService();
          directionsDisplay = new google.maps.DirectionsRenderer(
          {
              suppressMarkers: true,
              suppressInfoWindows: true,
              polylineOptions: { strokeColor: '#000000', strokeOpacity: 0.5 } 
          });
          directionsDisplay.setMap(map);
          var request = {
              origin:source, 
              destination:destination,
              travelMode: google.maps.DirectionsTravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) 
          {
              if (status == google.maps.DirectionsStatus.OK) 
              {
                  directionsDisplay.setDirections(response);
  
              }
          });
  
  }
  </code></pre>