MASIGNCLEAN101

Cara Menampilkan Informasi Rute Menggunakan Info Window di Google Maps

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.

Pembahasan

Cara Menampilkan Informasi Rute Menggunakan Info Window di Google Maps
Gambar
Seperti biasa, buatlah file htm baru yang akan kita isi kode dalam membuat peta. Tidak disarankan untuk menggabung dengan file yang lama apabila anda belum memahami instruksi setiap baris kode program. Kita buat saja dengan nama direction_3.html, lalu ketikan 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>
                    
                    <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.
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