Menampilkan Rute Tercepat (Driving Directions) di Google Map Android


Sebelumnya kita sudah mencoba beberapa tutorial sebelumnya, sekarang kita bermain-main dengan rute tercepat milik google.😀 Google sekarang sudah menghilangkan service direction karena bukan menjadi hak miliknya, namun service tersebut masih dapat diakses dengan cara lain, yaitu menggunakan Google Maps. Google Maps secara tidak langsung masih mendukung pencarian jalan tercepat, namun kita harus mengetahui ini agar kita dapat mencari jalan tercepat untuk aplikasi kita.

Alur pengambilan data pada sistem yaitu :

  • User merequest data berupa url string pada Google Map
  • Google Map mengembalikan berupa respon dalam format KML
  • File KML diolah/di-parsing sehingga didapat lokasi di mana saja sebagai jalan tercepat
  • Data tersebut digambarkan pada Google Map

Langsung saja nggak pake lama-lama, Pertama-tama kita buat sebuah file Overlay, kita beri nama DirectionPathOverlay.java. Class ini digunakan untuk menggambarkan garis berwarna merah pada peta kita.

package com.iddev.googlemap;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.graphics.Paint.Join;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.Projection;

public class DirectionPathOverlay extends Overlay {

    private GeoPoint gp1;
    private GeoPoint gp2;

    public DirectionPathOverlay(GeoPoint gp1, GeoPoint gp2) {
        this.gp1 = gp1;
        this.gp2 = gp2;
    }

    @Override
    public boolean draw(Canvas canvas, MapView mapView, boolean shadow, long when) {
        Projection projection = mapView.getProjection();
        if (shadow == false) {
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            paint.setStrokeJoin(Join.ROUND);
            Point point = new Point();
            projection.toPixels(gp1, point);
            paint.setColor(Color.RED);
            Point point2 = new Point();
            projection.toPixels(gp2, point2);
            paint.setStrokeWidth(4);
            canvas.drawLine((float) point.x, (float) point.y, (float) point2.x,
                    (float) point2.y, paint);
        }
        return super.draw(canvas, mapView, shadow, when);
    }

    @Override
    public void draw(Canvas canvas, MapView mapView, boolean shadow) {
        // TODO Auto-generated method stub

        super.draw(canvas, mapView, shadow);
    }

}

Kemudian kita edit di class MainActivity.java, di sini kita lakukan pemanggilan data jalan tercepat pada Google Maps.

package com.iddev.googlemap;

import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;

import org.w3c.dom.Document;
import org.w3c.dom.Node;
import org.w3c.dom.NodeList;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.Window;
import android.widget.Toast;

public class MainActivity extends MapActivity {
	public MapView mapView;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.main);

		mapView = (MapView) findViewById(R.id.mapview);
		mapView.setBuiltInZoomControls(true);
		
		// set posisi tengah dari map
		MapController mapController = mapView.getController();
		mapController.setCenter(new GeoPoint(-7298115, 112739451));
		mapController.setZoom(12);
		
		List<Overlay> mapOverlays = mapView.getOverlays();
		Drawable drawable = this.getResources().getDrawable(R.drawable.bank);
		CustomItemizedOverlay itemizedoverlay = new CustomItemizedOverlay(drawable, this);
		GeoPoint point = new GeoPoint(-7298115, 112739451);
		OverlayItem overlayitem = new OverlayItem(point, "Ini adalah Judul", "Ini adalah keterangan");
		itemizedoverlay.addOverlay(overlayitem);
		mapOverlays.add(itemizedoverlay);
		
		//Memanggil Fungsi AddDirection, untuk mendapatkan data jalan.
		addDirection(new GeoPoint(-7298115, 112739451), new GeoPoint(-7276229,112763929));
    }
    
    public void addDirection(GeoPoint position1, GeoPoint position2) {
		GeoPoint source = position1;
		GeoPoint destination = position2;
		String sourceStr = source.getLatitudeE6()/1.0E6+","+source.getLongitudeE6()/1.0E6;
		String destStr = destination.getLatitudeE6()/1.0E6+","+destination.getLongitudeE6()/1.0E6;

		try{
			//mengambil data direction
			String pairs[] = getDirectionData(sourceStr, destStr);
			//melakukan parsing data
			String[] lngLat = pairs[0].split(",");

			GeoPoint startGP = new GeoPoint((int) (Double.parseDouble(lngLat[1]) * 1E6), (int) (Double.parseDouble(lngLat[0]) * 1E6));

			MapController mapController = mapView.getController();
			mapController.setCenter(startGP);
			mapController.setZoom(15);
			
			//menggambar garis sebagai overlay
			mapView.getOverlays().add(new DirectionPathOverlay(startGP, startGP));

			GeoPoint gp1;
			GeoPoint gp2 = startGP;

			for (int i = 1; i < pairs.length; i++) {
				lngLat = pairs[i].split(",");
				gp1 = gp2;
				// Hati-hati untuk GeoPoint, first:latitude, second:longitude

				gp2 = new GeoPoint((int) (Double.parseDouble(lngLat[1]) * 1E6), (int) (Double.parseDouble(lngLat[0]) * 1E6));
				mapView.getOverlays().add(new DirectionPathOverlay(gp1, gp2));
			}

			// Titik terakhir
			mapView.getOverlays().add(new DirectionPathOverlay(gp2, gp2));

		}catch (Exception e) {
			Toast.makeText(this, "Error : "+e, Toast.LENGTH_LONG);
		}

	}
    
    private String[] getDirectionData(String srcPlace, String destPlace) {

		String urlString = "http://maps.google.com/maps?f=d&hl=en&saddr=" + srcPlace + "&daddr=" + destPlace + "&ie=UTF8&0&om=0&output=kml";
		//ProgressDialog progress = ProgressDialog.show(MainActivity.this, "", urlString, true);
		Document doc = null;
		HttpURLConnection urlConnection = null;
		URL url = null;
		String pathConent = "";

		try {
			//Melakukan request ke server google
			url = new URL(urlString.toString());
			urlConnection = (HttpURLConnection) url.openConnection();
			urlConnection.setRequestMethod("GET");
			urlConnection.setDoOutput(true);
			urlConnection.setDoInput(true);
			urlConnection.connect();
			DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
			DocumentBuilder db = dbf.newDocumentBuilder();
			doc = db.parse(urlConnection.getInputStream());

		} catch (Exception e) {
			
		}
		
		//mengambil Node LineString yang merupakan tag dari file KML
		NodeList nl = doc.getElementsByTagName("LineString");
		for (int s = 0; s < nl.getLength(); s++) {
			Node rootNode = nl.item(s);
			NodeList configItems = rootNode.getChildNodes();
			for (int x = 0; x < configItems.getLength(); x++) {
				Node lineStringNode = configItems.item(x);
				NodeList path = lineStringNode.getChildNodes();
				pathConent = path.item(0).getNodeValue();
			}
		}
		//memfilter hasil direction
		String[] tempContent = pathConent.split(" ");
		return tempContent;
	}
    
    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

Hasil akhir :

Hasil Akhir

Hasil Akhir

NB : Penjelasan kode ada pada Source Code.

35 thoughts on “Menampilkan Rute Tercepat (Driving Directions) di Google Map Android

  1. hai mas sebelumnya berguna bgt tutorialnya…

    mas sya mau nanya nich.. klo kt mnginginkan data lokasi lat n long kita ambil datanya dr mysql spy bs d tmpilkan d map gmna y..

    thxs🙂

  2. ajib gan!!!!!
    membantu banget!!!!
    mantap…………….
    mantap………………………………..
    mantap…………..

    thank banget gan!!
    tapi kenapa ya pas ane coba terapin di app ane, directionya gak nyampe titik lokasi user.
    cuma nyampe jalan besar terdekat dengan lokasi user.
    kecuali kalo user berada di pinggir jalan besar, baru directionya nyampe titik lokasi(marker)

    • Iya, memang begitu, memang google kalau mencari jalan terdekat hanya melalui tempat yang ada jalannya.

      coba di link ini kalau kita geser marker ke area kosong, otomatis marker langsung snap ke jalan terdekat.🙂

  3. mas maaf saya mau nanya,,,, aplikasinya udah saya jalankan,, tapi ko buat menu searchnya pas di jalanin ga muncul ya mas? trus coding yg cara mengubah marker di tempat kita berada gmna ya mas? tolonngg mas pencerahannya,, makasihh mas..

  4. Salam, sebelumnya trima kasih sekali atas tutorialnya.

    mas, pertanyaan sy sama dengan Bpk Newbie tgl 16 Agustus 2011:
    bagaimana menginginkan data lokasi lat n long kita ambil datanya dr mysql spy bs d tmpilkan d map?
    Bpk febrianto.arif sudah menjawabnya, namun belum lengkap/selesai.
    bila ada contoh kode php nya/referensi lain, mohon dishare, mas..

    Thanks so much. Need reply ASAP.

  5. mas, makasih tutorialnya..

    saya mau tanya. Tutorial diatas, Latitude & Longitude point 1 & point 2 kan sudah diketahui.. gimana ya kalau kita ingin mendapatkan Lat & Long Point 1 dari GPS , sedangkan point 2nya dari spinner..

  6. siang pkk,
    mau tanya….
    kalau jarak titik yang dituju terhadap titik yang dimulai itu terlalu jauh, maka tampilan peta tdk seluruhnya…. itu nanti directionnya tetep ada ga pkk?
    lalu bagaimana caranya membuat agar bisa menggunakan GPS….

  7. siang pkk,
    mau tanya….
    kalau jarak titik yang dituju terhadap titik yang dimulai itu terlalu jauh, maka tampilan peta tdk seluruhnya…. itu nanti directionnya tetep ada ga pkk?
    lalu bagaimana caranya membuat agar bisa menggunakan GPS….

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s