Menampilkan Google Maps Directions Dengan Geolocation

Menampilkan Google Maps Directions Dengan Geolocation

Halo, akhirnya bisa ngeblog lagi dan akhirnya bisa nulis artikel tentang Google Maps lagi. Ok, sekarang topik yang akan saya bahas adalah tentang cara menampilkan Google Maps Directions dengan Google Geolocation. Dulu sebeneranya saya sudah pernah bahas ini sebelumnya tentang bagaimana cara membuat Google Maps Directions sendiri, nah sekarang kita bakal belajar bagaimana menampilkan Google Maps Directions dengan Geolocation.

Google Maps Directions Dengan Geolocation #Penjelasan

Pada artikel saya yang dulu kita harus menuliskan secara manual asal dan tujuannya. Nah, sekarang saya mau modifikasi agar user hanya tinggal menentukan tujuannya, lalu asalnya darimana ? nah koordinat asalnya berasal dari GPS dari device user itu sendiri, dengan menggunakan teknologi Geolocation kita bisa mengambil koordinat kita sendiri.

Tapi fitur ini sebenarnya juga punya kelemahan, yaitu jaringan / wireless network pada user. Misalkan saya menggunakan jaringan dari Internet Provider, nah biasanya titik koordinatnya akan menunjukan pada lokasi BTS / Tower pada Internet Provider, bukan pada perangkat user. Beda halnya dengan Operator Cellular, biasanya dia bisa mengambil koordinat pada perangkat user sendiri.

Google Maps Directions Dengan Geolocation #Tambahan

Sebagai tambahan saya memasukan 3 fitur baru yaitu rute alternatif, Traffic Layer dan juga Geocoder Autocomplete untuk akurasi daerah tujuan. Untuk Geocoder ini saya pernah tulis di artikel saya tentang bagaimana cara menggunakan Geocoder Autocomplete untuk mengisi form alamat.

Sama halnya dengan Traffic Layer atau tampilan Traffic Jalan Raya, saya pernah membahas tentang bagaimana cara menampilkan Traffic Jalan Raya Pada Google Maps.

Google Maps Directions Dengan Geolocation #Script

Ok, sekarang kita udah faham kan apa yang mau dibuat, sekarang buka text editor kamu dan ketikkan kode dibawah ini

<html>
<head>
    <title></title>
    <!-- load library place untuk geocoder autocomplete dan kita set bahasanya ke bahasa indonesia -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places&amp;language=id"></script>
    <script src="jquery.js"></script>
    <script>
        var dest; var directionsDisplay; // memanggil service Google Maps Direction 
        var directionsService = new google.maps.DirectionsService(); 
        directionsDisplay = new google.maps.DirectionsRenderer(); 

        $(document).ready(function() { 
            var myOptions = { zoom: 4, center: new google.maps.LatLng(-2.548926,118.0148634), mapTypeId: google.maps.MapTypeId.ROADMAP }; 
            // posisi awal ketika halaman pertama kali dimuat 
            var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
            // memanggil fungsi geocoder autocomplete 
            var autocomplete = new google.maps.places.Autocomplete((document.getElementById('dest')),{ types: ['geocode'] }); 
            /* fungsi geolocation pada geocoder ini sangat penting agar pencarian daerah tujuan pada textbox ga ngaco */ 
            if (navigator.geolocation) { 
                navigator.geolocation.getCurrentPosition(function(position) { 
                    var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
                    autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,geolocation)); 
                }); 
            } 
        }); 

        $(document).ready(function() { 
            // ketika tombol cari di klik, maka proses pencarian rute dimulai 
            $("#cari").click(function() { 
                dest = $("#dest").val(); 
                var defaultLatLng = new google.maps.LatLng(-2.548926,118.0148634); 

                /* 
                 * nah, pada fungsi geolocation disini adalah ketika koordinat user berhasil didapat 
                 * maka peta koordinat yang digunakan adalah koordinat user, 
                 * namun jika tidak berhasil maka koordinat yang digunakan adalah koordinat default (pada variable defaultLatLng) 
                 */ 

                if (navigator.geolocation) { 
                    function success(pos) { 
                        drawMap(pos.coords.latitude,pos.coords.longitude); 
                    } 

                    function fail(error) { 
                        drawMap(defaultLatLng); 
                    } 

                    navigator.geolocation.getCurrentPosition(success, fail, { maximumAge: 500000, enableHighAccuracy:true, timeout: 6000 }); 
                } else { 
                    drawMap(defaultLatLng); 
                } 

                function drawMap(lat,lng) { 
                    var myOptions = { zoom: 15, center: new google.maps.LatLng(lat,lng), mapTypeId: google.maps.MapTypeId.ROADMAP }; 
                    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
                    // kita bikin marker untuk asal dengan koordinat user hasil dari geolocation 
                    var markerorigin = new google.maps.Marker({ 
                                        position: new google.maps.LatLng(parseFloat(lat),parseFloat(lng)), 
                                        map: map, 
                                        title: "Origin", 
                                        visible:false // kita ga perlu menampilkan markernya, jadi visibilitasnya kita set false 
                                    }); 

                    // membuat request ke Direction Service 
                    var request = { 
                                    origin: markerorigin.getPosition(), // untuk daerah asal, kita ambil posisi user 
                                    destination: dest, // untuk daerah tujuan, kita ambil value dari textbox tujuan 
                                    provideRouteAlternatives:true, // set true, karena kita ingin menampilkan rute alternatif 

                                    /** 
                                    * kamu bisa tambahkan opsi yang lain seperti 
                                    * avoidHighways:true (set true untuk menghindari jalan raya, set false untuk menonantifkan opsi ini) 
                                    * atau kamu bisa juga menambahkan opsi seperti 
                                    * avoidTolls:true (set true untuk menghindari jalan tol, set false untuk menonantifkan opsi ini) 
                                    */

                                    travelMode: google.maps.TravelMode.DRIVING // set mode DRIVING (mode berkendara / kendaraan pribadi) 
                                    
                                    /** 
                                    * kamu bisa ganti dengan * google.maps.TravelMode.BICYCLING (mode bersepeda) 
                                    * google.maps.TravelMode.WALKING (mode berjalan) 
                                    * google.maps.TravelMode.TRANSIT (mode kendaraan / transportasi umum) 
                                    */ 
                                }; 

                    directionsService.route(request, function(response, status) { 
                        if (status == google.maps.DirectionsStatus.OK) { 
                            directionsDisplay.setDirections(response); 
                        } 
                    }); 

                    // menampilkan rute pada peta dan juga direction panel sebagai petunjuk text 
                    directionsDisplay.setMap(map); 
                    directionsDisplay.setPanel(document.getElementById('directions-panel')); 
                    
                    // menampilkan layer traffic atau lalu-lintas pada peta 
                    var trafficLayer = new google.maps.TrafficLayer(); 
                    trafficLayer.setMap(map); 
                } 
            }); 
        });
    </script>
</head>
<body>
    <input id="dest" style="width: 500px;" type="text" />
    <button id="cari" type="button">Cari Rute</button>
    &nbsp; 
    <div id ="directions-panel" style ="float:right;width:48%;height:600px;overflow:auto;"></div> &nbsp; 
    <div id ="map-canvas" style="width:50%;height:600px;"></div>
</body>
</html>

Google Maps Directions Dengan Geolocation #Output

Nah, output dari script diatas kurang lebih adalah seperti ini

traffic-rute-geocoder

Gampang kan ? cuman menambahkan kode sedikit dan kamu udah bisa membuat sebuah sistem traffic dan juga monitoring lalu lintas secara sekaligus. Biar lebih jelas, kamu bisa download kode lengkapnya disini. Sekian dulu bahasan kita tentang Google Maps dengan Geolocation. Silahkan dicoba dan semoga bermanfaat. 😀

49 pemikiran pada “Menampilkan Google Maps Directions Dengan Geolocation”

    • Bisa aja sich mas bima, asalkan kita tau caranya memasukkan script PHP & HTML5 kedalam wordpress itu sendiri. Saya sendiri belum pernah coba buat bikin script PHP sendiri di atas engine WordPress. 😀

      Balas
  1. saya mau nanya, apakah kita bisa merubah rute direction dengan penalaran logika kita sendiri..kaya memasukan sebuah algoritma untuk pencarian rute terpendek ?

    Balas
    • yah ini juga yg saya cari-cari, yaitu memasukkan algoritma utk pencarian rute terpendek karena menurut saya google maps kurang bgitu akurat.
      saya baca2 klo ngga salah yaitu dgn menggunakan metode spherical law of consines.. klo ada yg tau share dong..

      Balas
  2. mau nanya mas, bagaimana caranya kalau tujuan / end rute diambil dari database ? jadi tinggal buat combobox saja untuk menampilkan nama tempat dari database ..
    makasih..

    Balas
  3. mas apa dari google ada update kok script nya gk jalan. pdhal waktu pertama dulu tak coba jalan eh giliran sekarang mau dipakai gak jalan.

    Balas
  4. mas mau tanya, kan aku buat aplikasi webgis penunjuk arah wisata menggunakan tutorial ini, yang saya mau tanyakan bagaimana caranya agar petunjuk arah atau rute yang sudah didapat bisa diakses melalui aplikasi peta?

    misalkan saya dari jakarta mencari lokasi ke bandung, arah atau rutenya sudah ditampilkan dari hasil geocoding dan geolocation ini tapi saya ingin di buka di aplikasi googlemap/waze atau layanan peta sejenis.

    terima kasih sebelumnya, maaf jika pertanyaannya sulit dimengerti,

    Balas
    • Saya belum pernah coba, tapi kayaknya bisa diintegrasikan dengan Google API, jadi hasil dari pencarian rute itu bisa di simpan di akun Google kita, sehingga kita bisa buka rute itu di apps Google Maps kita, minusnya adalah…semakin sering kita melakukan pencarian maka datanya akan semakin menumpuk di data Apps Google Maps kita.

      Sedangkan untuk Waze sendiri saya belum pernah explore jauh….

      Balas
      • yup maksut saya seperti itu, adkah referansi mas? aku dah searching gk ketemu2. kalau minusnya itu sih gk masalah mas, cuma dipakai buat demo saat ujian skripsi.

        o iya mas, satu lagi yang mau saya tanyakan. kok di google chrome banyak demo dari artikel2 mas dan web lain juga tentang webgis fungsinya pada gak jalan ya?
        ex: http://demo.elcicko.com/polymer-maps/
        http://demo.elcicko.com/polymer-multimarker/

        apa ada update an dari google nya ya mas, soalnya ini mau ujian pra malah webgisnya bermasalah

        Balas
          • udah bisa mas, chrome ku yang eror. makasih banyak mas berkat artikel2 semua tentang google map akhirnya program ku kelar 🙂

            untuk dibuka lewat app androidnya aku akalin pake
            “https://goo.gl/app/maps?link=https://www.google.com/maps/dir/lokasi awal/lokasi tujuan”
            otomatis bisa buka lewat app berbasis gps, bisa lewat waze juga malahan

  5. akhirnya dpt jga artikel yg membahas google maps api hehe

    ini sy ada pertanyaan gan, knp ya secara default google maps api ini lebih mementingkan rute/jalur tol dibanding rute lain?

    Balas
    • karena penalaran Google Maps sederhana sebenarnya, Jika jarak yang ditempuh adalah antar kota maka rute yang diambil adalah rute yang biasa digunakan pada umumnya dan juga aksesnya lebih mudah yaitu jalan tol.

      Balas
  6. Mas, kalau dibalik bisa gak?
    jadi tujuannya tetap, tapi posisi awalnya selain dari geolocation bisa di tulis sendiri tempat awalnya.

    terimakasih

    Balas
      • jadi ini ane pakek pakek modul gps neo-6c ane sambungin ke laptop pakek USB to TTL. data gpsnya sudah terdeteksi di daemon gpsd (ane pakek ubuntu). cuma waktu runing aplikasi web tidak ada tanda-tanda data tsb di pakai. soalnya melencengnya masih jauh bnget. mungkin ada suhu2 yang paham geolocation pakek data gpsnya? makasih

        Balas
  7. gan klw dri lokasinya kita berada pake geolocation ke koordinat lokasi yag kita buat sendiri, gmna kodingnya ?? lngsung aja ngk perlu pake database atw search box dan cek box

    Balas
  8. Mas , ko peta nyah gg nampil yaa ,

    Error
    Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error_.ab @ js?v=3.exp&sensor=false&libraries=places&language=id:32(anonymous function) @ common.js:51(anonymous function) @ common.js:189c @ common.js:45(anonymous function) @ AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%2Fpenting%2Fgeolocation-direction%2F&ca…:1
    util.js:211 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
    util.js:211 Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

    kenapa yaa??
    maap masih newbie

    Balas
  9. Mas mau tanya, klo cara nya biar outo input longtitude latitude pakai google form ada nga ya ? krn saya masih harus membuka aplikasi lain untuk dapat input titik log lat nya.

    thx sebelum nya

    Balas
  10. saya menjalankan di localhost map dan petunjuk jalannya tampil, namu ketika di hosting tidak tampil..mohon petunjuknya apakah perlu setting php.ini??

    Balas

Tinggalkan komentar