Skip to content

Instantly share code, notes, and snippets.

@ferdhika31

ferdhika31/jalur.html

Last active June 12, 2018 10:29
Show Gist options
  • Save ferdhika31/5339d7b12fa213086ef8bbec5f546396 to your computer and use it in GitHub Desktop.
Save ferdhika31/5339d7b12fa213086ef8bbec5f546396 to your computer and use it in GitHub Desktop.
Download ZIP
Cek keluar jalur di google maps
Raw
jalur.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Check directions between two point</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 48%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
/* margin: 0;
padding: 0; */
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="floating-panel">
<b>Start <sub style="color:red;">(A)</sub>: </b>
<select id="start">
<option value="-6.9481023,107.6065922" selected>(Start)</option>
<option value="-6.937724999999999,107.6124936">(End)</option>
<option value="-6.938891,107.60621">(Dalem Jalur)</option>
<option value="-6.937526,107.60596">(Luar Jalur)</option>
<option value="-6.937560,107.60617">(Lumayan deket Jalur)</option>
</select>
<b>End <sub style="color:red;">(B)</sub>: </b>
<select id="end">
<option value="-6.9481023,107.6065922">(Start)</option>
<option value="-6.937724999999999,107.6124936" selected>(End)</option>
<option value="-6.938891,107.60621">(Dalem Jalur)</option>
<option value="-6.937526,107.60596">(Luar Jalur)</option>
<option value="-6.937560,107.60617">(Lumayan deket Jalur)</option>
</select>
<b>In between <sub style="color:red;">(C)</sub>: </b>
<select id="between">
<option value="-6.9481023,107.6065922">(Start)</option>
<option value="-6.937724999999999,107.6124936">(End)</option>
<option value="-6.938891,107.60621" selected>(Dalem Jalur)</option>
<option value="-6.937526,107.60596">(Luar Jalur)</option>
<option value="-6.937560,107.60617">(Lumayan deket Jalur)</option>
</select>
<button id="check">Check</button>
</div>
<div id="map"></div>
Rumus : <code>distance(A, C) + distance(C, B) == distance(A, B)</code><br>
Keterangan :
<ol type="A">
<li>Start point</li>
<li>End point</li>
<li>Between point?</li>
</ol>
Status : <b id="statusna">(none)</b><br>
Log : <br>
<textarea cols="100%" rows="10" id="log"></textarea><br>
<button onclick="clearLog()">Clear Log</button>
<script>
var markers = null;
function clearLog(){
document.getElementById("log").value = "";
}
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: -6.939086, lng: 107.60617}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
checkBetween(directionsService, directionsDisplay, map, document.getElementById('start').value, document.getElementById('end').value, document.getElementById('between').value);
};
// document.getElementById('start').addEventListener('change', onChangeHandler);
// document.getElementById('end').addEventListener('change', onChangeHandler);
document.getElementById('check').addEventListener('click', onChangeHandler);
}
async function checkBetween(directionsService, directionsDisplay, map, pointA, pointB, pointC){
a = await calculateRoute(directionsService, directionsDisplay, pointA, pointB, true);
await displayMarkerBetween(directionsService, directionsDisplay, map, pointC);
b = await calculateRoute(directionsService, directionsDisplay, pointA, pointC, false);
c = await calculateRoute(directionsService, directionsDisplay, pointC, pointB, false);
console.log(a);
console.log(b);
console.log(c);
// append
var sama = (parseInt(b+c)==a);
var textNa="";
if(sama){
document.getElementById("statusna").innerHTML = "Di dalem polyline";
}else{
document.getElementById("statusna").innerHTML = "Di luar polyline";
}
textNa += "Rumus : ("+b+"+"+c+")=="+a+"\n";
textNa += "Hasil : "+parseInt(b+c)+"=="+a+" = "+sama+"\n";
textNa += "Berada dalam jalur? "+sama+"\n";
textNa += "=========================================================\n";
document.getElementById("log").value += textNa;
}
const calculateRoute = (directionsService, directionsDisplay, dist1, dist2, display) => (new Promise((resolve,reject) => {
directionsService.route({
origin: dist1,
destination: dist2,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
console.log(response);
// var start = dist1;
// var startSelect = start.options[start.selectedIndex];
// var end = dist2;
// var endSelect = end.options[end.selectedIndex];
// var textNa;
textNa = "Distance ["+response.routes[0].legs[0].start_address+" - "+response.routes[0].legs[0].end_address+"] = "+response.routes[0].legs[0].distance.value+"\n";
textNa += "------------------------\n";
// // append
document.getElementById("log").value += textNa;
if(display){
directionsDisplay.setDirections(response);
}
resolve(response.routes[0].legs[0].distance.value);
} else {
window.alert('Directions request failed due to ' + status);
resolve(0);
}
});
}))
function displayMarkerBetween(directionsService, directionsDisplay, map, pointC){
var between = document.getElementById("between");
var betweenSelect = between.options[between.selectedIndex];
var kordinatBetween = pointC.split(",");
// remove marker sbelumnya
if(markers!=null){
markers.setMap(null);
}
var markerBetween = new google.maps.Marker({
draggable: true,
position: { lat: parseFloat(kordinatBetween[0]), lng: parseFloat(kordinatBetween[1]) },
map: map,
title: betweenSelect.text,
label: "C"
});
markerBetween.addListener('click', function() {
new google.maps.InfoWindow({
content: betweenSelect.text
}).open(map, markerBetween);
});
markers = markerBetween;
google.maps.event.addListener(markers, 'dragend', function(evt){
betweenKordinat = evt.latLng.lat()+","+evt.latLng.lng();
console.log(betweenKordinat);
checkBetween(directionsService, directionsDisplay, map, document.getElementById('start').value, document.getElementById('end').value, betweenKordinat);
});
// append
textNa = "Marker between displayed.\n";
textNa += "------------------------\n";
document.getElementById("log").value += textNa;
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbGgR7Bl-IlAcTeobZwk8fEk0u6sQRkW0&callback=initMap">
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment