Skip to content

Instantly share code, notes, and snippets.

@afian
Created September 21, 2023 10:28
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save afian/8a3c456f632002e7c85b27c8b47187c0 to your computer and use it in GitHub Desktop.
ODRD / Routes Preferred ComputeRoutes example
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment