JSTS polyline buffer

JSTS polyline buffer

by amanboss9

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAiv7I9jK0DW9yV4RvaQtpkjJh3-57F7_M&amp;libraries=drawing,geometry,visualization,places&amp;language=fr-FR&amp;region=MA"></script>
<script src="https://marocgeo.com/modules/zone/js/javascript.util.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.2.1/jsts.min.js"></script>
<div id="map-canvas"></div>
<div id="directions-panel"></div>

CSS

#right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map-canvas {
        height: 100%;
        float: left;
        width: 70%;
        height: 100%;
      }
      #right-panel {
        margin: 20px;
        border-width: 2px;
        width: 20%;
        height: 400px;
        float: left;
        text-align: left;
        padding-top: 0;
      }
      #directions-panel {
        margin-top: 10px;
        background-color: #FFEE77;
        padding: 10px;
        overflow: scroll;
        height: 174px;
      }

JavaScript

var mapCanvas = "map-canvas";
	    var map;
	    var directionsService = new google.maps.DirectionsService;
	    var directionsDisplay = new google.maps.DirectionsRenderer;

	    var mapConfig = {
			zoom: 6,
			center: { lat: 32.082575, lng: -6.921387 },
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
				mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]
			},
			overviewMapControl: true,
			scaleControl: true,
			streetViewControl: true,
			panControl: true,
			rotateControl: true,
			maxZoomForCenter:17
		};

	function initialize() {
		map = new google.maps.Map(document.getElementById(mapCanvas),mapConfig);
		directionsDisplay.setMap(map);
		calculateAndDisplayRoute(directionsService, directionsDisplay);
	};

	function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var waypts = [];
        var checkboxArray = document.getElementById('waypoints');
      
      waypts.push({
            location: new window.google.maps.LatLng(33.494873,-7.718875),
            stopover: true
        });

        waypts.push({
            location: new window.google.maps.LatLng(33.595501,-7.578152),
            stopover: true
        });
         

        directionsService.route({
          origin: new window.google.maps.LatLng(33.563656, -7.636282),
          destination: new window.google.maps.LatLng(33.477188, -7.945458),
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: 'DRIVING'
        }, function(response, status) {
          if (status === 'OK') {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];

			var legs = response.routes[0].legs;
			overviewPath = response.routes[0].overview_path,
			overviewPathGeo = [];
			for (var i = 0; i < legs.length; i++) {
			  var steps = legs[i].steps;
			  for...