Menampilkan Google Maps Directions Dengan Geolocation

Dipublikasikan oleh El Cicko pada

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


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

49 Komentar

Bima Anggara Dwi Mahardika · September 23, 2015 pada 11:01 am

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 · September 23, 2015 pada 12:00 pm

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

Ilham Wara Nugroho · Oktober 29, 2015 pada 8:58 pm

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

    El Cicko · Oktober 30, 2015 pada 1:56 am

    sayangnya Google tidak mempunyai fitur seperti itu mas setahu saya…

    hellkops · April 12, 2016 pada 6:36 pm

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

yoga · Januari 16, 2016 pada 6:18 pm

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 · Januari 22, 2016 pada 9:57 am

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

      yoga · Januari 25, 2016 pada 9:35 pm

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

      rahadian surya · Maret 28, 2017 pada 12:01 pm

      Di bikinin tutorialnya dong gan… 😁

indrazeal · Januari 21, 2016 pada 7:18 pm

Akhirnya jalan juga directionnya. Thanks infonya.

Kliwon · Februari 4, 2016 pada 10:52 pm

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

dani · Februari 21, 2016 pada 10:01 pm

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

    El Cicko · Maret 3, 2016 pada 7:35 pm

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

dimas Riadi · Februari 24, 2016 pada 7:31 pm

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

agung · Maret 14, 2016 pada 6:20 am

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 · Maret 14, 2016 pada 2:26 pm

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

      agung · Maret 31, 2016 pada 8:35 am

      udah bisa mas, human eror hehe

kartika · Maret 20, 2016 pada 5:44 pm

itu php apa html

agung · Maret 31, 2016 pada 8:33 am

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 · Maret 31, 2016 pada 9:46 am

    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 · Maret 31, 2016 pada 10:35 am

      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 · April 1, 2016 pada 5:20 pm

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

          agung · April 1, 2016 pada 10:12 pm

          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 · April 2, 2016 pada 4:49 am

          Alhamdulillah, senang bisa membantu…semoga bermanfaat 😀

hellkops · April 12, 2016 pada 6:32 pm

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 · April 12, 2016 pada 7:16 pm

    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.

Abdi Nugraha · April 21, 2016 pada 1:26 am

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

terimakasih

Rizqi Fauzil · April 28, 2016 pada 10:06 am

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 · Mei 5, 2016 pada 4:51 am

    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 · Mei 9, 2016 pada 7:41 am

      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

ridho almuqorobin · Mei 17, 2016 pada 11:11 pm

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

andy · Juni 20, 2016 pada 12:55 pm

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

Winingsih Purwati · Juni 23, 2016 pada 2:25 pm

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

zulhamdi · Agustus 2, 2016 pada 2:39 pm

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 · Agustus 2, 2016 pada 4:16 pm

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

alpian · Agustus 10, 2016 pada 2:12 pm

bisa minta kontaknya mas ?ada yang mau ditanyakan email ke saya irigasoen@gmail.com

Batulicin · Agustus 15, 2016 pada 9:28 am

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

yulfita · Agustus 17, 2016 pada 11:22 pm

Kalau pakai geolocation itu koordinatnya bisa akurat apa tidak mas

    El Cicko · Agustus 18, 2016 pada 8:59 am

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

dirga · November 25, 2016 pada 10:50 am

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

muadzin · Desember 6, 2016 pada 4:35 pm

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

Danang · Desember 20, 2016 pada 3:51 pm

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

Alghifari Fikri Santoso · Maret 4, 2017 pada 2:42 pm

artikelnya sangat bermanfaat dan membantu sekali.
cek artikel menarik cerupa dengan mengunjungi :
http://pena.gunadarma.ac.id
terima kasih 🙂

r4r4matra@gmail.com · Juli 20, 2017 pada 10:46 am

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

dwikibaskoro · September 21, 2017 pada 9:49 pm

mas bisa ditambah legend ga ya ? :9

Tinggalkan Balasan

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