Cara Membuat Marker Direction Complex Map Dengan API Google Maps

Cara Membuat Marker Direction Complex Map Dengan API Google Maps - Jika sebelumnya kita membuat text direction map dengan panel di samping, kali ini kita akan membuat Marker Direction Complex dengan API Google Maps. Marker yang disini menandai setiap tikungan atau arahan dari jalur yang di ambil, jika sebelumnya kita menggunakan panel di samping disini kita menggunakan teks petunjuk di setiap marker, ketika marker di klik maka akan muncul petunjuk ke mana anda harus bergerak apakah berbelok, tetap lurus atau berputar. Untuk lebih jelasnnya langsung saja kita ke prakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama directions_mark.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Membuat Marker Direction Complex dengan API Google Maps</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      .input {
   height: 25px;
   padding: 2px;
   width: 200px;
      }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #directions-panel {
        height: 100%;
        float: right;
        width: 300px;
        overflow: auto;
      }
   #map-canvas { height: 400px;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }

   #directions-panel {
     float: none;
     width: 100%;
   }
    }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
  var map;
  var directionsDisplay;
  var directionsService;
  var stepDisplay;
  var markerArray = [];

  function initialize() {
    directionsService = new google.maps.DirectionsService();

    var manhattan = new google.maps.LatLng(-6.187931, 107.031279);
    var mapOptions = {
   zoom: 13,
   center: manhattan
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var rendererOptions = {
   map: map
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

    stepDisplay = new google.maps.InfoWindow();
  }

  function calcRoute() {

    // Pertama hapus semua marker yang ada di peta.
    for (var i = 0; i < markerArray.length; i++) {
   markerArray[i].setMap(null);
    }

    // Kosongkan isi array markerArray.
    markerArray = [];

    // Menentukan start dan tujuan
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var request = {
     origin: start,
     destination: end,
     travelMode: google.maps.TravelMode.DRIVING
    };

    // Membuat rute perjalanan dari titik start 
    // Memanggil fungsi untuk membuat marker di setiap step
    directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     var warnings = document.getElementById('warnings_panel');
     warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
     directionsDisplay.setDirections(response);
     showSteps(response);
   }
    });
  }

  function showSteps(directionResult) {
    // Untuk setiap step letakan marker dan buat teks pentujuk untuk setiap marker
    var myRoute = directionResult.routes[0].legs[0];

    for (var i = 0; i < myRoute.steps.length; i++) {
   var marker = new google.maps.Marker({
     position: myRoute.steps[i].start_location,
     map: map
   });
   attachInstructionText(marker, myRoute.steps[i].instructions);
   markerArray[i] = marker;
    }
  }

  function attachInstructionText(marker, text) {
    google.maps.event.addListener(marker, 'click', function() {
   // Ketika marker di klik tampilkan teks petunjuk
   stepDisplay.setContent(text);
   stepDisplay.open(map, marker);
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Marker Direction Complex dengan API Google Maps</h1>
  <div id="panel">
    <input class="input" id="start" type="text" value="Kebalen, bekasi">
    <input class="input" id="end" type="text" value="Universitas bhayangkara, bekasi">
    <input id="btn" type="button" value="Search" onclick="calcRoute()">
  </div>
  <div id="map-canvas"></div>
  <div id="warnings_panel" style="width:100%;height:10%;text-align:center"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Penjelasannya anda dapat baca di kode komentar.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Direction Service Complex API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas cara mengganti mode perjalanan yang dilakukan apakah mengendarai mobil, berjalan, sepeda, dll.

Baca disini : Cara Membuat Travel Mode Map Dengan API Google Maps

Marker Direction Complex Map Dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.