Programmer GoBlog

Cara mudah belajar pemrograman komputer

Selasa, 30 Agustus 2016

Rute dengan banyak tujuan dengan google map api

            2 komentar    
Menanggapi pertanyaan di komentar pada postingan ini.
Mengenai bagaimana menentukan rute untuk tujuan lebih dari satu titik pada google map api.

Berikut script nya.


<!DOCTYPE html>
<html>
<head>
 <title>ROUTE MAP</title>
 <style type="text/css">
  html, body {
        height: 100%;
        margin: 0;
        padding: 0;
       }
       #map_canvas {
         height: 100%;
       }
 </style>
</head>
<body>
 <div id="map_canvas">  

 </div>



</body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>  
<script type="text/javascript">
 //DUA VARIABLE BERIKUT DIPERLUKAN UNTUK RUTE
 var directionsDisplay;
 var directionsService = new google.maps.DirectionsService();


 (function() {  // fungsi untuk dijalankan ketika halaman web dubuka  
   var infowindow = null;  
      
   initialize(); // mengeksekusi fungsi initialize()  
     
  })();  
    
    function initialize() {  

     //BARIS DIBAWAH INI JUGA DIPERLUKAN UNTUK RUTE
     directionsDisplay = new google.maps.DirectionsRenderer();

        // Baris berikut digunakan untuk mengisi marker atau tanda titik di peta  
        var sites = [  
    
         ['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.  
         ['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],  
         ['DJ',-5.3745833,105.2425024,3,'<h4>IBI DARMAJAYA</h4><p>Keterangan untuk marker</p>'],
         ['Rumah Sakit Advent',-5.392718, 105.261890,3,'<h4>Rumah Sakit Advent</h4><p>Keterangan untuk marker</p>']

   
        ];  
        var centerMap = new google.maps.LatLng(-5.364505,105.243442); // mengatur pusat peta  
          
        var myOptions = {  
          zoom: 15, // level zoom peta  
          center: centerMap, // setting pusat peta ke centerMap  
          mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta  
        }  
    
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html  

        //BARIS DIBAWAH INI UNTUK MELETAKKAN RUTE PADA MAP "map_canvas" ^
      directionsDisplay.setMap(map);

        // setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.  
          
        infowindow = new google.maps.InfoWindow({  
            content: "loading..."  
          });  
    
        var bikeLayer = new google.maps.BicyclingLayer();  
        bikeLayer.setMap(map); //memnunculkan peta  

        //BARIS DIBAWAH INI UNTUK MEMANGGIL FUNGSI calcRoute()
        calcRoute();   
      }  
    
        

        //FUNGSI CALCROUTE UNTUK MENGGAMBAR RUTE DARI TITIK A KE TITIK B / START ke END
        function calcRoute() {
    var start = '-5.358725,105.233413'; // Titik Start
    var end = '-5.3745833,105.2425024'; //Titik Akhir

    //================Tambahan dari tutorial sebelumnya==========================
    var daftartujuan = ["-5.358725,105.233413", "-5.364505,105.243442", "-5.3745833,105.2425024","-5.392718, 105.261890"];
    var jalur = [];
    for (var i = 0; i < daftartujuan.length; i++) {
        var address = daftartujuan[i];
        if (address !== "") {
            jalur.push({
                location: address,
                stopover: true
            });
        }
    }
    //===========================================

    var request = {
      origin:start,
      destination:end,
      //============Uni juga tambahan untuk jalur=======

           waypoints: jalur,
            optimizeWaypoints: false, //true untuk membiarkan google menentukan jalur terpendek. false untuk jalur berdasarkan uturan yang kita tentukan

      //===================
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
      }
    });
  }
    
    
     
        function setMarkers(map, markers) {  
         //berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];  
        for (var i = 0; i < markers.length; i++) {  
          var sites = markers[i];  
          var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);  
          var marker = new google.maps.Marker({  
            position: siteLatLng,  
            map: map,  
            title: sites[0],  
            zIndex: sites[3],  
            html: sites[4]  
    
          });  
    
          var contentString = "Some content";  
          // berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)  
          google.maps.event.addListener(marker, "mouseover", function () {  
              
            infowindow.setContent(this.html);  
            infowindow.open(map, this);  
          });  
        }  
      }  
    

</script>

</html>

Semoga bermanfaat.

Apakah Mungkin untuk menerapkan algoritma tertentu pada proses pencarian rute pada google map api

            Tidak ada komentar    
bagaimana membuat pencarian rute terpendek menggunakan dijkstra? dengan titik awal di tandai dan titik tujuan di combo box. kalo bisa di post ke blog ya mas, terima kasih sebelumnya. :)

Halo sobat programmer, kembali lagi dengan coretan dari programmer goBlog.
Tulisan kali ini menanggapi email dari salah satu pembaca blog programmerGoBlog yang menanyakan perihal penerapan algoritma dijkstra dalam penentuan rute terpendek pada google map api v2.

Sejauh pengetahuan programmerGoBlog, untuk menggunakan google map api kita hanya bisa menggunakan apa yang sudah disediakan oleh google map, termasuk algoritma yang digunakan adalah algoritma milik google itu sendiri. Yang mana kita tidak bisa merubah atau memilih algoritma mana yang akan kita gunakan dalam penentuan jarak antar dua lokasi pada google map.
Karena pada dasarnya ketika kita menggunakan api, kita hanya meminta rute dari titik A ke titik B, dan yang menentukan rute terpendek adalah google map sendiri tanpa kita bisa ikut campur tangan terhadap algoritma yang mereka gunakan.

Sebagai tambahan pengetahuan, saya rasa google tidak menggunakan algoritma dijkstra untuk menentukan rute --atau setidaknya bukan dijkstra asli alias sudah hasil modifikasi mereka (red: google map). Programmer goBlog berasumsi demikian dikarenakan algoritma dijkstra itu sendiri terlalu simpel untuk diterapkan pada skala ini. Dalam kasus algoritma penentuan rute pada google map, penulis meyakini bahwa algoritma yang digunakan adalah A* yaitu sebuah algoritma yang banyak diterapkan untuk pencarian jalur dan graph traversal.

Jadi saya yakin sobat sudah bisa menyimpulkan dari penjelasan diatas bahwa kita tidak mungkin menerapkan algoritma tertentu ketika menggunakan google map api untuk menentukan rute, sebab google telah menentukan algoritma mereka sendiri dan kita tinggal menerima hasil dari algoritma tersebut dan menampilkan rute di peta google.

Demikian coretan singkat dari programmer goBlog kali ini, semoga bisa menjawab pertanyaan dari sobat semua yang mungkin memiliki pertanyaan yang sama atau mirip dengan ini.

Terimakasih telah berkunjung ke gubuk programmer GoBlog.

Popular Posts

Recent Posts

Unordered List

Pages

Kunjungan

Diberdayakan oleh Blogger.