BLANTERORBITv102

    Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps

    Minggu, 25 Februari 2018

    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.

    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

    1. mass itu dapet lat long nya gimana ya, ko punya saya di set latlong nya tetep di posisi jawabarat ya, ga di tiap saerah.
      itu posisi ngambil di daerah.

      BalasHapus
      Balasan
      1. Ambilnya dari web maps.google.com, ambil aja latlong dari situ. kalau untuk point A dan B itu berdasarkan nama daerah.

        Hapus
    2. Mas sekarang kok Query Limit terus kenapa ya?

      BalasHapus
    3. query limit yang kayak mana tuh?? :-d

      BalasHapus