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.

2 komentar:

  1. Arief1 September 2016 pukul 18.16

    Nice min,,
    Kasih Tutorial Memasukan dan menampilakan rute kedalam dan dari database nya dong min..
    makasih sebelumnya..

    BalasHapus
  2. Unknown24 Februari 2020 pukul 15.37

    According to Stanford Medical, It is really the one and ONLY reason this country's women live 10 years longer and weigh 42 lbs less than we do.

    (And really, it has NOTHING to do with genetics or some hard exercise and really, EVERYTHING to "how" they are eating.)

    BTW, What I said is "HOW", and not "what"...

    CLICK on this link to find out if this short test can help you decipher your real weight loss potential

    BalasHapus

Popular Posts

Recent Posts

Unordered List

Pages

Kunjungan

Diberdayakan oleh Blogger.