afian/routeMap.html

## routeMap.html
<!DOCTYPE html>
<html>
  <head>
    <title>Draw Route</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&v=3.exp&libraries=geometry&callback=Function.prototype"></script>
  </head>
  <body>
    <div id="map" style="height: 600px; width: 100%;"></div>
    <script>


      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {
            lat: 49.2578182,
            lng: -123.206304
          },
          zoom: 12 // Adjust the zoom level as needed
        });
      }

      initMap();

      var startMarker = new google.maps.Marker({
        position: {
          lat: 49.2806962,
          lng: -123.0828679
        },
        map: map,
        title: 'Start'
      });


      var endMarker = new google.maps.Marker({
        position: {
          lat: 49.1951165,
          lng: -123.1814231
        },
        map: map,
        title: 'End'
      });

      var decodedPath = google.maps.geometry.encoding.decodePath("ecxkH|rfnV?sAfARl@TpBpAz@Rh@F`CHr@ClCDBgChBBJo`@hSHjNJf@Bb@JhELnD@tAKPIzPJtGHPHvNRhGIdIB~@Yj@g@R[Vm@h@}A\\k@j@e@r@Qn@ChUZlD@tF@|@F`HNxCBpFFVMd`@ZRNxIDvBL^FNGdEp@bBLxCJ~E@nIJZP`FHCzH?jFFTSrn@Kb@GtOEjOFj@Ol^Gb@S~Y?lDi@~j@IdGMrGUfQbEJtOPvSRjBHh\\d@ra@f@rMPxQ\\LBt@EzCxIPVxB~GFl@nB`GbDrKxDpLnCdJj@|Bj@lBfApCb@xA\\nBNRz@xCzB`Hj@vAj@`AbAfAt@h@xAh@zBp@LJbG~A`PvElAj@v@f@pAxA`A|Ax@pBh@lBJd@`AhIxC|XxBvTz@zHNjBNnDTtETlHBrBBvLEny@EtXGpBSdCQbAk@vBi@xAmCfGWhAe@nGa@vH@tBN`Cd@~CPb@DF");

      var polyline = new google.maps.Polyline({
        path: decodedPath,
        geodesic: true,
        strokeColor: '#4285F4', // Adjust the color as needed
        strokeOpacity: 0.9,
        strokeWeight: 3 // Adjust the line thickness as needed
      });

      polyline.setMap(map);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Draw Route</title>
	<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&v=3.exp&libraries=geometry&callback=Function.prototype"></script>
	</head>
	<body>
	<div id="map" style="height: 600px; width: 100%;"></div>
	<script>


	var map;
	function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	center: {
	lat: 49.2578182,
	lng: -123.206304
	},
	zoom: 12 // Adjust the zoom level as needed
	});
	}

	initMap();

	var startMarker = new google.maps.Marker({
	position: {
	lat: 49.2806962,
	lng: -123.0828679
	},
	map: map,
	title: 'Start'
	});


	var endMarker = new google.maps.Marker({
	position: {
	lat: 49.1951165,
	lng: -123.1814231
	},
	map: map,
	title: 'End'
	});

	var decodedPath = google.maps.geometry.encoding.decodePath("ecxkH\|rfnV?sAfARl@TpBpAz@Rh@F`CHr@ClCDBgChBBJo`@hSHjNJf@Bb@JhELnD@tAKPIzPJtGHPHvNRhGIdIB~@Yj@g@R[Vm@h@}A\\k@j@e@r@Qn@ChUZlD@tF@\|@F`HNxCBpFFVMd`@ZRNxIDvBL^FNGdEp@bBLxCJ~E@nIJZP`FHCzH?jFFTSrn@Kb@GtOEjOFj@Ol^Gb@S~Y?lDi@~j@IdGMrGUfQbEJtOPvSRjBHh\\d@ra@f@rMPxQ\\LBt@EzCxIPVxB~GFl@nB`GbDrKxDpLnCdJj@\|Bj@lBfApCb@xA\\nBNRz@xCzB`Hj@vAj@`AbAfAt@h@xAh@zBp@LJbG~A`PvElAj@v@f@pAxA`A\|Ax@pBh@lBJd@`AhIxC\|XxBvTz@zHNjBNnDTtETlHBrBBvLEny@EtXGpBSdCQbAk@vBi@xAmCfGWhAe@nGa@vH@tBN`Cd@~CPb@DF");

	var polyline = new google.maps.Polyline({
	path: decodedPath,
	geodesic: true,
	strokeColor: '#4285F4', // Adjust the color as needed
	strokeOpacity: 0.9,
	strokeWeight: 3 // Adjust the line thickness as needed
	});

	polyline.setMap(map);
	</script>
	</body>
	</html>