Pembuka
Setelah berhasil membuat rute sederhana menggunakan google maps api, selanjutnya pada tutorial ini akan memberikan contoh bagaimana menapilkan informasi atau deskripsi arah pada saat rute ditampilkan.
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
 |
| Deskripsi Rute |
<!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>
<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: 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 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);
directionsDisplay.setPanel(document.getElementById('panel'));
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>
Pada baris 76 - 82 merupakan bagian untuk menampilkan panel informasi dari rute yang dibuat. Lalu untuk menampilkan informasi kita hanya menambah beberapa baris kode javascript yaitu:
directionsDisplay.setPanel(document.getElementById('panel'));
Kode ini dapat dilihat pada baris 106, dengan menampilkan informasi berdasarkan id panel pada elemen html.
Penutup
Tutorial sederhana Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps dapat kamu kostum kembali, baik itu dari segi tampilan ataupun dari segi proses. Jangan lupa untuk selalu merubah API_KEY_KAMU dengan api key yang sudah diregistrasi kedalam google developer.
mass itu dapet lat long nya gimana ya, ko punya saya di set latlong nya tetep di posisi jawabarat ya, ga di tiap saerah.
BalasHapusitu posisi ngambil di daerah.
Ambilnya dari web maps.google.com, ambil aja latlong dari situ. kalau untuk point A dan B itu berdasarkan nama daerah.
HapusMas sekarang kok Query Limit terus kenapa ya?
BalasHapusquery limit yang kayak mana tuh?? :-d
BalasHapus