Pembuka
Setelah sebelumnya berhasil menampilkan informasi rute di dalam elemen div (panel), selanjutnya kita akan membuat marker yang mana setiap marker memiliki informasi rute yang dituju di dalam infowindow. Sebelum itu adapaun tutorial ini adalah tutorial ke-3 dari 5 tutorial yang akan diberikan.
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 |
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1.0, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>
Java Source Code
</title>
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" src="https://code.jquery.com/jquery-3.2.1.slim.min.js">
</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: 0px; 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; } #right-panel {height: 100%;float: right;width: 390px;overflow: auto;}
</style>
</link>
</meta>
</meta>
</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 aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarCollapse" data-toggle="collapse" type="button">
<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>
</br>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div id="map" class="card">
</div>
</div>
<div class="col-md-4">
<div class="card">
<div id="panel" class="card-block" style="overflow-y: scroll;height: 400px;">
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container">
<span class="text-muted">
www.java-sc.com
</span>
</div>
</footer>
</body>
<script crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
<script>
function initMap() {
var markerArray = [];
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}
});
var stepDisplay = new google.maps.InfoWindow;
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('panel'));
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('finish').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map) {
for (var i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('finish').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
showSteps(response, markerArray, stepDisplay, map);
$("#error").empty();
$("#error").removeClass();
} else {
$("#error").addClass("badge badge-danger");
$("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
}
});
}
function showSteps(directionResult, markerArray, stepDisplay, map) {
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
marker.setMap(map);
marker.setPosition(myRoute.steps[i].start_location);
attachInstructionText(
stepDisplay, marker, myRoute.steps[i].instructions, map);
}
}
function attachInstructionText(stepDisplay, marker, text, map) {
google.maps.event.addListener(marker, 'click', function() {
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}
</script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=KODE_API_KAMU&callback=initMap"></script>
</html>
Dari kode sebelumnya "Lihat Tutorial Ini", kita menambah dua fungsi yaitu showSteps dan attachInstructionText. Yang mana pada fungsi showSteps adalah memasukan marker ke dalam peta. Lihat pada line 153, jika respon yang diterima adalah OK maka lokasi setiap titik rute akan disimpan ke dalam variabel markerArray. Sedangkan fungsi kedua adalah untuk menampilkan informasi ketika marker di klik.Penutup
Tentu saja tutorial ini tidak sesempurna yang dipikirkan, anda dapat mengkostum beberapa kode misalnya memberikan icon pada setiap titik pengganti marker yang begitu besar. Atau anda dapat menampilkan informasi lain yang dapat di tampilkan saat respon diterima (OK). Silahkan dikostum sesuai dengan kebutuhan, jika ingin berbagi silahkan tinggalkan komentar di postingan ini.
0 Komentar
Keep Learning and Keep Sharing