Pembuka
Google maps sudah menyediakan layanan direction yang sangat mudah untuk di implementasikan. Dalam hal ini saya akan memberikan contoh dalam membuat direction dengan google maps api dalam peta Indonesia. Adapun beberapa point yang ada dalam tutorial ini yaitu:
Membuat Rute Sederhana dengan Google Maps.- Menampilkan Deskripsi Rute dengan Google Maps.
- Menampilkan Informasi Rute Menggunakan Info Window di Google Maps.
- Menampilkan Rute Peta Dari Database.
- Menampilkan Rute Alternatif Di Google Maps.
Pembahasan
 |
| Gambar 1 |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Java Source Code</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_KAMU&callback=initMap">
</script>
<style>
html { position: relative; height: 100%; }
body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: #f5f5f5; } body > .container { padding: 60px 15px 10px; } .footer > .container { padding-right: 15px; padding-left: 15px; } code { font-size: 80%; } #map { margin-top: 20px; width: 100%; height: 400px; } #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>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="">Cara Membuat Rute Sederhana Dengan Google Maps</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>
<main class="container">
<div class="row">
<div class="col-md-12">
<br>
<div class="row">
<label class="col-sm-2 col-form-label">Awal</label>
<div class="col">
<select class="form-control" id="start" >
<option value="Pekanbaru">Pekanbaru</option>
<option value="Duri Talang Mandi">Duri</option>
<option value="Dumai">Dumai</option>
<option value="Lirik Indragiri Hulu">Lirik</option>
<option value="Pasir Pengaraian">Pasir Pengaraian</option>
<option value="Pulau Bengkalis">Pulau Bengkalis</option>
</select>
</div>
<label class="col-sm-2 col-form-label">Tujuan</label>
<div class="col">
<select class="form-control" id="finish">
<option value="Pekanbaru">Pekanbaru</option>
<option value="Duri Talang Mandi">Duri</option>
<option value="Dumai">Dumai</option>
<option value="Lirik Indragiri Hulu">Lirik</option>
<option value="Pasir Pengaraian">Pasir Pegaraian</option>
<option value="Pulau Bengkalis">Pulau Bengkalis</option>
</select>
</div>
</div>
<span id="error"></span>
</div>
</div>
<div id="map"></div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">www.java-sc.com</span>
</div>
</footer>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<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: 0.50404, lng: 102.4579712}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('finish').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('finish').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
$("#error").empty();
$("#error").removeClass();
} else {
$("#error").addClass("badge badge-danger");
$("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
}
});
}
</script>
</html>
Dari kode diatas, saya menggunakan framework bootstrap 4 untuk layout, untuk data yang dicari adalah nama daerah namun dalam hal ini kita harus benar-benar memastikan service google api dapat mengecek nama lokasi. directionService dan directionDisplay merupakan variabel untuk menggunakan service directions google Api. Fungsi calculateAndDisplayRute adalah fungsi untuk menampilkan rute yang dibentuk berdasarkan lokasi yang kita tentukan pada value form select. Kita juga bisa merubah lokasi dari nama ke dalam bentuk LatLang, hanya merubah bagian value pada form select. Sebagai contoh untuk daerah Pekanbaru, <option value="0.5139625,101.3711348">Pekanbaru</option>.
Penutup
Pada postingan ini hanya memberikan kamu contoh sederhana untuk menampilkan rute berdasarkan nama daerah dan koordinat lokasi.
0 Komentar
Keep Learning and Keep Sharing