Cari Jalur Terpendek antar Point/ Marker

Posted: December 7, 2010 in Maps Lanjutan
Tags: , ,

Tutorial kali merupakan tutorial terakhir yang akan kita tulis disini, pada bagian submenu Maps Lanjutan. Sebenarnya masih banyak sekali, namun saya merasa tambahan yang lainnya hanya merupakan pengembangan.. sorry kalau saya salah😀, tapi menurut saya seperti itu. salah satu keunggulan dari Google Maps adalah dapat mencari jalur terpendek antar point/ Marker yang dibuat. Disini akan saya bahas bagaimana membuat Routing antar point dengan point yang lain.

Dalam pembahasan kali ini, kita hanya memberikan contoh pencarian jalur dari point satu ke point lain, dalam pengembangannya sebenarnya ini bisa dikembangkan untuk meRoute banyak sekali point, nah itu kembali ke pengambangan anda bagaimana membuat route tersebut berlaku ke beberapa point secara lansung. Kita tidak menggunakan tutorial yang lama, disini kita akan gunakan script yang baru dan kita mulai dari awal pembuatan. Silahkan baca urutannya dengan jelas, dan Semoga membantu. CMIIW…😀

alur yang akan kita buat yaitu, disini kita akan memilih 2 area/point dengan mengklik area tersebut. Lalu program akan otomatis melakukan pencarian jalur terpendek.

  1. Buat terlebih dahulu file .html
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <span class="hiddenSpellError" pre="">Membuat</span> Route Antar Point
    </head>
    <body>
    </body>
    </html>
    
  2. Tambahkan script dibawah ini didalam tag head
    <script class="hiddenSpellError"><!--mce:0--></script>
    key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
    type="text/javascript"></script>
    
  3. Tambahkan load maps didalam tag body
    <body onUnload="GUnload()">
    
  4. Tulis diantara tag body, disini kita gunakan 2 div. Div-1 digunakan untuk menampilkan peta, Div-2 digunakan untuk menampilkan informasi jalan
    <div id="map" style="width: <span class=;">800px; height: 600px; float:left;"></div>
    <div id="info" style="width: <span class=;">400px; height: 600px; overflow:auto;"></div>
    <noscript>mce:1</noscript>
    
  5. Javascript  utama untuk menampilkan dan memproses routing jalan terpendek.
    <script type="text/javascript">
    	var numb =1;
    	var points = [];
    
    	var baseIcon = new GIcon();
              baseIcon.iconSize=new GSize(32,32);
              baseIcon.shadowSize=new GSize(56,32);
              baseIcon.iconAnchor=new GPoint(16,32);
              baseIcon.infoWindowAnchor=new GPoint(16,0);
     	var ico_jin = new GIcon(baseIcon, "icon_jin.png", null, "icon_jins.png");
    
    	if (GBrowserIsCompatible()) {
    
    		var map = new GMap2(document.getElementById("map"));
    			map.addControl(new GLargeMapControl());
    			map.addControl(new GMapTypeControl());
    			map.setCenter(new GLatLng(-7.159828,112.650976),12);
    
    		var myListener = GEvent.bind(map,'click',this, function(overlay, point){
    
    		if(point){
    			if(numb <= 2){
    				var marker = new GMarker(point, {icon:ico_jin, draggable: true});
    				map.addOverlay(marker);
    
    				document.getElementById("info").innerHTML += "Informasi Latitude-Longitude :
    "+point+"
    ";
    				points[numb] = point;
    				numb++;
    
    				if(numb == 3){
    					document.getElementById("info").innerHTML = "";
    					routing(points[1],points[2]);
    					numb = 1;
    				}
    			}
    			else{
    				document.getElementById("info").innerHTML = "";
    			}
    		}
    
    		function routing(point1,point2){
    			var start_point = point1;
    			var end_point = point2;
    
    			var directionsPanel = document.getElementById("info");
    			var directions = new GDirections(map, directionsPanel);
    
    			var locale = "ID";
    			directions.load("from: "+start_point+" to:"+end_point,{ "locale": locale });
    
    		}
    	});
    
        }
        else {
          alert("Sepurane rek.., Google Maps tidak bisa dibuka dengan browser ini");
        }
        </script>
    

Setelah selesai, running html anda di browser. Hasilnya kira2 seperti dibawah ini

Caranya :

  1. klik pada sembarang area, kalo bs pas jalan yah…😀 kan binggung kalo yg di klik ndak da jalan di area sekitar😀
  2. lalu klik point  kedua pada sembarang tempat.
  3. secara otomatis, program akan mencari alur yang terpendek.

Hasilnya :

OK. Selamat Mencoba….😀

CMIIW…😀

Comments
  1. tee says:

    nice..

    gimana klo ambil data dari database….??
    trmaksih atas infonya…

  2. kurniawandwi says:

    pake mode XML, trus main di JSON atau AJAX.

    sebenarnya pengembangan ini akan lebih mudah lagi jika anda mendalami javascript, karena basic dari Google Maps API tuh pake javascript.

    CMIIW…

  3. Lita says:

    Jin ?? g pp ya pnggiL’y Jin..😀
    tu script’y ku’ g jLn si, psti eror syntak yg da key nya.

  4. aryanchandra says:

    algoritma yang dipakai tipe apa ya ?

  5. Reiz says:

    ini diterapin di desktop yah ?
    kalo di smartphone android bisa ga ?

  6. turtzie89 says:

    koq bisa bahasa indonesia jin?
    saya bikin sendiri malah jadi bahasa inggris..
    buat rubah bahasa kodenya yang mana ya?

  7. Cak Yon says:

    pasangin cara pencarian jalur terpendek yang ngmbil dari data base dong, sekalian polyline nya .
    terima kasih sebelumnya

  8. Ilham says:

    om jin, kebetulan ane lagi buat skripsi mengenai GIS, nah dalemnya ane pake layanan Gdirections seperti tutorial diatas, kalo skripsi kan biasanya harus ada metode nya ya, meskipun kalo pake google maps itu g perlu ada algo buat metode nya, nah, kalo kita mau pake metode gimana yah?

    atau kita bisa tau ga so google pake metode apa?

    • kurniawandwi says:

      bs kok dimasukkan metode , tergantung kreatifitas kita, base nya kan javascript , bs di mainin di javascriptnya aj.

      saya juga ndak tau tuh pake metodh apa google maps yg skrng, kalau dulu seingat saya ACO

  9. Bayu j. says:

    saya coba kok petanya juga g tampil mas?? apa key nya itu udah g bsa??

    • kurniawandwi says:

      sebenarnya itu google maps versi 2.0, skrng 3.0 sudah ndak usah pake key, lebih mudah mas belajar pake yg versi terbartu, lebih ndak ribet kok.

      bisa baca2 lebih detail di http://developers.google.com/maps/

      • Bayu j. says:

        Bedanya disitu ya mas trnyata, mas mau minta sdkit contoh untuk menentukan alternatif jalur yang bisa dilalui mas..
        tapi berdasarkan titik point koordinat awal dan titik point koordinat tujuan(Akhir) mas..
        saya sudah coba yang berdasarkan “nama_jalan” mas, tapi hasilnya kurang maksimal untuk aplikasi yang saya buat.. karna terkendala nama jalan2 yang tidak dikenali oleh google maps.
        mungkin dengan memanfaatkan titik point koordinat itu bisa lebih detail mas nanti hasilnya mungkin? kalau bisa di share mas caranya, atau mungkin lwat email.
        mkasih buuuannyak mas responnya sangat membantu..

      • Bayu j. says:

        heheh Maaf mas baru saya coba lagi dah lama g saya coba, kbnyakan nyoba banyak sample sampe lupa g ngliat dlu diatas.hehe

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s