Membuat direction map gis di php pemula berdasarkan rute. pada kesempatan kali ini freak programmer akan membagikan cara membuat rute direction dimana direction ini akan membuat pada peta satu arah. langsung saja.
Langkah-langkah
1. Akses ke url https://console.developers.google.com
2. masuk ke projek anda seperti
gambar di bawah.
3.Ketik pada kolom pencarian
“Direction” dan pilih direction API
4.Aktifkan API dengan memilih aktifkan
5.Setelah selesai proses aktivasi, akan muncul tampilan
seperti dibawah ini
Coding
1.
Buatlah sebuah file dengan nama “direction.php”
2.
Isi file dengan sebagai berikut
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Nama Anda</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* 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: </b>
<select id="start">
<option value="banjarbaru">Banjarbaru</option>
<option value="matah">Matah</option>
<option value="angsau">Angsau</option>
<option value="banjarmasin">Banjarmasin</option>
<option value="martapura">Martapura</option>
<option value="pelaihari">Pelaihari</option>
<option value="-3.753921, 114.767339">Politeknik Tanah Laut</option>
<option value="-3.799797, 114.782563">Kantor Bupati Tanah Laut</option>
<option value="-3.799557, 114.777925">Rumah Sakit Boedjasin</option>
</select>
<b>End: </b>
<select id="end">
<option value="banjarbaru">Banjarbaru</option>
<option value="matah">Matah</option>
<option value="angsau">Angsau</option>
<option value="banjarmasin">Banjarmasin</option>
<option value="martapura">Martapura</option>
<option value="pelaihari">Pelaihari</option>
<option value="-3.753921, 114.767339">Politeknik Tanah Laut</option>
<option value="-3.799797, 114.782563">Kantor Bupati Tanah Laut</option>
<option value="-3.799557, 114.777925">Rumah Sakit Boedjasin</option>
</select>
</div>
<div id="map"></div>
<script>
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: -3.799557,lng: 114.777925}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7B9RynI4hQM_Y4BG9GYxsTLWwYkGASRo&callback=initMap">
</script>
</body>
</html>
KELEBIHAN
Kelebihan dari
direction adalah memberitahu arah pada peta dimana peta tersebut mempunyai
jalan alur menuju ke tempat tujuan. Hal ini akan memudahkan pemakai peta dalam
mecari tempat tujuan, direction memberikan informasi dari satu titik ke titk
lain yang memungkinkan memberitahu jalan yang tepan dan cepat kepada pemakai
peta direction.
