MASIGNCLEAN101

Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps

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. 

Pembahasan

Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps
Deskripsi Rute
Agar mempermudah pembelajaran, maka buatlah file html baru dengan nama (misalnya) direction_2. Kemudian pada file tersebut ketikanlah kode program berikut ini.
<!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.
loading...
Share This :
Hady Eka Saputra

Belajar adalah proses menuju kesuksesan dan proses membuat hasilnya menjadi bernilai. 

Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

Keep Learning and Keep Sharing