Programmer GoBlog

Cara mudah belajar pemrograman komputer

Rabu, 09 Desember 2015

Menambahkan rute di peta google map api untuk GIS

           ,       8 komentar    


Beberapa hari yang lalu ada salah seorang dari pembaca blog ini mengirimkan email kepada saya menanyakan tentang bagaimana menambahkan atau membuat rute dari gedung A ke gedung B. Atau dari koordinat A ke koordinat B.

Bukanya pelit untuk membalas email, tetapi saya rasa jauh lebih baik jika saya bagikan di blog saja, supaya apabila ada yang membutuhkan tinggal comot di blog ini.

Baiklah langsung saja kita buat rute di web gis google map kita.
Dalam praktik untuk tulisan kali ini saya menggunakan sourcecode dari tulisan sebelumnya di sini dengan sedikit modifikasi tentunya.

Berikut contoh script untuk menampilkan rute pada peta gis google map kita.



  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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>']
   
        ];  
        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';
    var end = '-5.3745833,105.2425024';
    var request = {
      origin:start,
      destination:end,
      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>

Disetiap Baris yang saya tambahkan untuk memunculkan rute di peta telah saya tambahkan komentar. sehingga sobat bisa membedakan perubahan/modifikasi yang saya buat dari script pada tutorial sebelumnya sehingga bisa menampilkan rute atau track dari satu titik ke titik lain.
sekian, semoga bermanfaat.

8 komentar:

  1. Unknown3 Maret 2016 pukul 13.03

    nice tut gan:)
    btw, gmana klo nampilin multiple direction, jadi misal tujuannya ada 3 atau 4 tempat, dimana diawali dari A-D.
    mohon bimbingannya gan.
    Thank a lot

    BalasHapus
    Balasan
    1. Unknown30 Agustus 2016 pukul 10.35

      cek disini om..
      https://programmergoblog.blogspot.co.id/2016/08/rute-dengan-banyak-tujuan-dengan-google.html

      Hapus
  2. Unknown24 Agustus 2016 pukul 03.44

    kak kok rute jalannya engga nampil ya ?

    BalasHapus
  3. Anonim15 November 2016 pukul 14.04

    makasih gan buat tutorialnya. buat yg gak muncul petanya atau error itu karena google maps api nya blm disetting. bisa baca disini http://stackoverflow.com/questions/37991340/error-google-maps-api-error-missingkeymaperror

    BalasHapus
  4. Unknown23 Juli 2018 pukul 14.52

    misi gan.. mw nnya..
    kalau membuat rute.. titik awalnya menggunakan GPS dan titik akhirnya pada suatu tempat.. itu bagai mana ya gan?
    mohon penjelasanya gan.. terimakasih..

    BalasHapus
  5. sandimario2822 Oktober 2018 pukul 22.26

    makasih telah mempermudah tugas kulaiah saya
    semoga anda masuk surga.
    oke mantapppp


    jangan lupa kunjungi website saya dan website kampus saya.
    https://sandimario28.mahasiswa.atmaluhur.ac.id
    http://www.atmaluhur.ac.id

    BalasHapus
  6. ferafe16 November 2018 pukul 19.21

    Terima kasih artikelnya, sangat membantu.

    Kalau berkenan, kunjungi website kampus saya di : http://www.atmaluhur.ac.id
    dan website pribadi saya di : https://ferafe.mahasiswa.atmaluhur.ac.id

    BalasHapus
  7. Unknown2 Desember 2018 pukul 18.55

    bang saya udah ikut tutorial tetapi ga nampil rute nya?

    dan juga bang kunjungi website sya yg baru saya kembangkan : https://sites.google.com/mahasiswa.atmaluhur.ac.id/adityawicaksono/beranda
    dan juga website kampus saya : http://www.atmaluhur.ac.id/

    BalasHapus

Popular Posts

Recent Posts

Unordered List

Pages

Kunjungan

Diberdayakan oleh Blogger.