Press "Enter" to skip to content

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 Comments

  1. Bima Anggara Dwi Mahardika Bima Anggara Dwi Mahardika September 23, 2015

    Salam Peta, 🙂

    saya mau bertanya, apakah fitur google maps directions dengan geolocation bisaa diaplikasikan pada wordpress? dan bagaimana caranya?mohon pencerahan dari El Cicko 🙂

    • El Cicko El Cicko Post author | September 23, 2015

      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. 😀

  2. Ilham Wara Nugroho Ilham Wara Nugroho Oktober 29, 2015

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

    • El Cicko El Cicko Post author | Oktober 30, 2015

      sayangnya Google tidak mempunyai fitur seperti itu mas setahu saya…

    • hellkops hellkops April 12, 2016

      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..

  3. yoga yoga Januari 16, 2016

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

    • El Cicko El Cicko Post author | Januari 22, 2016

      bisa koq mas, kolom pencarian untuk tujuan diganti aja dengan combobox dari database.

      • yoga yoga Januari 25, 2016

        combobox bisa tampil nama dari database tp directions gak jalan mas, gmn ya ? trims

  4. indrazeal indrazeal Januari 21, 2016

    Akhirnya jalan juga directionnya. Thanks infonya.

    • El Cicko El Cicko Post author | Januari 22, 2016

      sama sama mas 😀

  5. Kliwon Kliwon Februari 4, 2016

    Kak.. Bagaimana jika ingin menampilkan lokasi beberapa pengguna yg online dengan bantuan gps?

  6. dani dani Februari 21, 2016

    bang mau tanya, klo map direction dengan geolocation ini map nya bisa di tambah mark gak ? sesuai koordinat yang ada,, minta pencerahan

    • El Cicko El Cicko Post author | Maret 3, 2016

      saya kurang tahu mas, tapi kalau ga salah ga bisa…hanya mendukung 1 asal dan 1 tujuan…cuman menampilkan rute alternatif aja mas 😀

  7. dimas Riadi dimas Riadi Februari 24, 2016

    mas cara ganti rute awal ( a ) gmn ya ??

  8. agung agung Maret 14, 2016

    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.

    • El Cicko El Cicko Post author | Maret 14, 2016

      apa sudah di cek di browsernya mas apakah browser diperbolehkan untuk mengambil lokasi mas ?

      • agung agung Maret 31, 2016

        udah bisa mas, human eror hehe

  9. agung agung Maret 31, 2016

    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,

    • El Cicko El Cicko Post author | Maret 31, 2016

      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….

      • agung agung Maret 31, 2016

        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

        • El Cicko El Cicko Post author | April 1, 2016

          wah? saya coba di browser saya running koq mas… 🙁

          • agung agung April 1, 2016

            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

          • El Cicko El Cicko Post author | April 2, 2016

            Alhamdulillah, senang bisa membantu…semoga bermanfaat 😀

  10. hellkops hellkops April 12, 2016

    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?

    • El Cicko El Cicko Post author | April 12, 2016

      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.

  11. Abdi Nugraha Abdi Nugraha April 21, 2016

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

    terimakasih

  12. Rizqi Fauzil Rizqi Fauzil April 28, 2016

    sangat membantu gan

    oh ya kalau misal data posisi awal langsung ambil data dari modul gps bisa ndak ya gan? mohon bantuannya

    Tnx

    • El Cicko El Cicko Post author | Mei 5, 2016

      Itu seharusnya udah otomatis dengan GPS koq mas, kalau GPSnya ga nyala…maka script akan secara otomatis mendeteksi cell tower terdekat punya user.

      • Rizqi Fauzil Rizqi Fauzil Mei 9, 2016

        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

  13. ridho almuqorobin ridho almuqorobin Mei 17, 2016

    kenapa pas ane hosting ko gk bisa ya gan tpi di localhost bisa. solusinya gimana gan tolong bantuannya gan

  14. andy andy Juni 20, 2016

    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

  15. Winingsih Purwati Winingsih Purwati Juni 23, 2016

    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

  16. zulhamdi zulhamdi Agustus 2, 2016

    permisi bang,
    script code nya bikin bingung kl tampilan nya kyk gitu, susah kl mau di copas .
    bisa tlong kirimin code full ny gk lewat email??
    zulhamdie@gmail.com

    sangat membantu.
    terima kasih

    • El Cicko El Cicko Post author | Agustus 2, 2016

      Oh iya, jadi ancur ya -_____-
      nanti ya gan saya update artikelnya….soalnya filenya lupa lagi

  17. Batulicin Batulicin Agustus 15, 2016

    mas kok saya coba upload di hostingan tidak jalan ya saat klik cari rute malah blank peta nya

  18. yulfita yulfita Agustus 17, 2016

    Kalau pakai geolocation itu koordinatnya bisa akurat apa tidak mas

    • El Cicko El Cicko Post author | Agustus 18, 2016

      Tergantung bagaimana jaringannya mbak, biasanya akurasinya dalam radius, radius 100-500 meter

  19. dirga dirga November 25, 2016

    itu kalau tanpa ada function click gmn om? jadi tujuan (marker B) itu lokasi terdekat berdasarkan yg ada di database kita?

  20. muadzin muadzin Desember 6, 2016

    mas jika saya ingin membuat rute perjalanannya di muat dari database bagaimana alurnya mas .?

  21. Danang Danang Desember 20, 2016

    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

  22. r4r4matra@gmail.com r4r4matra@gmail.com Juli 20, 2017

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

  23. dwikibaskoro dwikibaskoro September 21, 2017

    mas bisa ditambah legend ga ya ? :9

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *