JSFiddle - React, Tailwind, and code Playground

by hmahida

HTML

<!-- language: lang-html -->

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js">
        </script>
    <div id="map"></div>

<!-- end snippet -->

JavaScript

var list = [
    { origin: new google.maps.LatLng(41.13021, 16.83124), destination: new google.maps.LatLng(41.12813, 16.83778), color: 1},
    { origin: new google.maps.LatLng(41.12813, 16.83778), destination: new google.maps.LatLng(41.13021, 16.83124), color: 2}
    ];
    var vStrokeColor;
    var vzIndex;
    var map;
    var directionsService = new google.maps.DirectionsService();

    function calcRoute(entry) {
      var request = {
          origin: entry.origin,
          destination: entry.destination,
          travelMode: google.maps.TravelMode["DRIVING"]
      };

      if (entry.color == 1){
        vStrokeColor = "#FF0000"
        vzIndex = 100

      }else if (entry.color == 2){
        vStrokeColor = "#0DFF00"
        vzIndex = 1
      }

      var directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:{suppressPolylines:true, geodesic:true,  strokeColor:vStrokeColor, strokeWeight: 4, strokeOpacity: 1, zIndex: vzIndex}});
      directionsDisplay.setMap(map);

      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
    }  
    function initialize() {   
        var myLatlng = new google.maps.LatLng(41.08801, 16.83689);
        var mapOptions = {
            zoom: 15, 
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
          }
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
        calcRoute(list[0]);
        calcRoute(list[1]);

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

<!-- language: lang-css -->

    html,body,#map {
      height: 100%;
      width: 100%;
    }