Selamat Siang sobat blogger, dalam tutorial kali ini saya akan membagikan tentang cara penggunaan Google Maps Direction. Google Maps Directions adalah layanan yang menghitung arah antar lokasi menggunakan permintaaan HTTP. Kalian bisa menghitung arah ( menggunakan berbagai metode transfortasi ) dengan menggunakan objek DirectionsService . Objek ini berkomunikasi dengan Google Maps API Directions Service yang menerima permintaan arah dan mengembalikan hasil yang sudah dihitung. Anda juha bisa menangani hasil arah ini sendiri atau menggunakan objek DirectionsRenderer untuk merendernya, Baca selengkapnya disini. Ok langsung saja ikuti langkah-langkah di bawah ini :
1. Langkah pertama adalah kalian harus memiliki akun google untuk dapat mengakses console developers google, klik di sini untuk membukanya. maka akan tampil seperti gambar dibawah :
2. Setelah kalian masuk ke halaman tersebut, pilih lah projek yang kalian inginkan untuk menambahkan Libary Dirctions API atau membuat objek baru dengan menklik new project.
3. Setelah kalian menentukkan projek mana yang ingin di tambahkan Libary Dirctions API, Kemudian klik Menu Libary yang ada di sebelah kanan layar komputer kalian .
4. Kemudian masukkan di pencarian "Direction" dan pilih Direction API.
5. Selanjutnya menambahkan Liabry Directions API atau mengaktifkannya di projek kita dengan mengklik tombol "ENABLE".
6. Jika sudah maka akan tampil seperti gambar di bawah ini.
7. Selanjunya pilih Credentials, kemudian copykan API KEY nya.
8. Kemudian buatlah file direction.php dalam sebuah folder webgis yang berada di dalam folder Xampp/htdoct/webgis . copykan source code di bawah ini :
|
<!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=AIzaSyBlxcwGP2qZTqTg_O9rWM57ZxaQ-Qa0uFY&callback=initMap">
</script>
</body>
</html>
|
9. Selanjunya buka di browser dengan mengetikkan localhost/webgis/derection.php , kemudian pilih tempat asal ke tempat tujuan. dan akan tampil jalur dari tempat asal ke tempat tujuan seperti gambar di bawah ini :
Sekian tutorial mengenai cara penggunaan google maps direction, semoga bermanfaat dan bisa menambah referensi kalian, share jika tutorial kali ini bermanfaat bagi teman-teman atau memberikan saran di kolom komentar. Terima Kasih.
0 Comments
EmoticonEmoticon