Tutorial Android Google Map Direction

Jumpa lagi dengan Agus Haryanto dalam seri tutorial Android, Sehubungan dengan banyaknya pertanyaan mengenai direction untuk googlemap diandroid, saya akan coba jawab dengan tutorial ini.

Aplikasi LBS tanpa fitur direction ibarat makan somai tanpa bumbu, untuk itu kita harus mengetahui cara menggambar direction pada googlemap android.

Sebetulnya jawaban bagaimana cara menggambar driving direction diandroid dapat kita lakukan dengan search melalui google. Dalam perjalanan pencarian ini, saya dapatkan jawabannya dari http://about-android.blogspot.com/2010/03/sample-google-map-driving-direction.html

Sejak tanggalΒ  27 Juli 2012 direction dengan KML sudah tidak disupport googlesebagai laternatifnya silahkan kunjungi Tutorial Android GoogleMap Direction JSON

Pada tutorial kali ini saya tidak banyak merubah kode yang ada di link tersebut. Saya hanya merubah sedikit saja agar lebih mudah dimengerti. Mari kita mulai langkah-langkahnya.

1. Buat Project baru isikan fieldnya seperti dibawah ini

2.. Kita siapkan layout untuk aplikasi kita, edit file main.xm

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.google.android.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:enabled="true"
        android:clickable="true"
        android:apiKey="0bvY2ipiUvzSE4ybKkHjanqDBGKckFswnJuPw7A"
        />

    <LinearLayout android:id="@+id/zoom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        />

</RelativeLayout>

3. Buat Class java baru lalu simpan dengan nama DirectionPathOverlay.java, lalu isikan dengan kode berikut.

package com.agus.direction;

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

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) {
        // TODO Auto-generated method stub
        Projection projection = mapView.getProjection();
        if (shadow == false) {
            Paint paint = new Paint();
            paint.setAntiAlias(true);
            Point point = new Point();
            projection.toPixels(gp1, point);
            paint.setColor(Color.GREEN);
            Point point2 = new Point();
            projection.toPixels(gp2, point2);
            paint.setStrokeWidth(3);
            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);
    }

}

Class inilah yang nantinya akan menggambarkan direction (jalur) antara dua tempat, disini kita bisa menset warna untuk directionnya dengan perintah

paint.setColor(Color.GREEN);

Perintah diatas akan membuat warna directionnya hijau

Kita juga dapat mengatur tebal tipisnya garis direction dengan perintah

paint.setStrokeWidth(3);

Perintah diatas akan membuat ketebalan garis directionnya 3 pixel.

4. Sekarang Edit file BelajarDirectionActivity.java, isi dengan kode berikut

package com.agus.direction;

import java.net.HttpURLConnection;
import java.net.URL;

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 android.os.Bundle;
import android.util.Log;

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

public class BelajarDirectionActivity extends MapActivity {
    MapView myMapView = null;
    MapController myMC = null;
    GeoPoint geoPoint = null;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        myMapView = (MapView) findViewById(R.id.mapView);
        geoPoint = null;
        myMapView.setSatellite(false);
        String ragunan = "-6.3039,106.8267"; //lat,lng ragunan
        String tamanmini = "-6.29436,106.8859"; //lat,lng taman mini
        String pairs[] = getDirectionData(ragunan, tamanmini);
        String[] lngLat = pairs[0].split(",");

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

        myMC = myMapView.getController();
        geoPoint = startGP;
        myMC.setCenter(geoPoint);
        myMC.setZoom(14);
        myMapView.getOverlays().add(new DirectionPathOverlay(startGP, startGP));

        // NAVIGATE THE PATH
        GeoPoint gp1;
        GeoPoint gp2 = startGP;

        for (int i = 1; i < pairs.length; i++) {
            lngLat = pairs[i].split(",");
            gp1 = gp2;
            // watch out! For GeoPoint, first:latitude, second:longitude
            gp2 = new GeoPoint((int) (Double.parseDouble(lngLat[1]) * 1E6),
                    (int) (Double.parseDouble(lngLat[0]) * 1E6));
            myMapView.getOverlays().add(new DirectionPathOverlay(gp1, gp2));
            //Log.d("xxx", "pair:" + pairs[i]);
        }

        // END POINT
        myMapView.getOverlays().add(new DirectionPathOverlay(gp2, gp2));

        myMapView.getController().animateTo(startGP);
        myMapView.setBuiltInZoomControls(true);
        myMapView.displayZoomControls(true);

    }

    @Override
    protected boolean isRouteDisplayed() {
        // TODO Auto-generated method stub
        return false;
    }

    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";
        //Log.d("URL", urlString);
        Document doc = null;
        HttpURLConnection urlConnection = null;
        URL url = null;
        String pathConent = "";
        try {

            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) {
        }

        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();
            }
        }
        String[] tempContent = pathConent.split(" ");
        return tempContent;
    }

}

Disini kita akan menampilkan direction dari Kebun Binatang Ragunan ke Taman Mini Indonesia Indah.
Perhatikan Method getDirectionData. Method inilah yang menjadi otak untuk mendapatkan data titik koordinat yang akan dijadikan panduan untuk menggambar direction

5. Jangan lupa kita harus menambahkan permission untuk INTERNET pada file AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.agus.direction"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
     <uses-library android:name="com.google.android.maps" />
        <activity android:name=".BelajarDirectionActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

6. Sekarang mari kita run programnya.

Wow, Jalur Directionnya berhasil tergambar di map dengan warna hijau. Coba mainkan perintah kode paint.setColor pada file DirectionPathOverlay.java untuk merubah-rubah warna jalurnya.

Directionnya sudah tergambar tapi kok tidak ada markernya yah. Nah pada bagian akhir tutorial kali ini para pembaca dan penggemar setia blog ini saya kasih tantangan untuk menambahkan marker pada titik ragunan dan titik taman mini.

Semoga Bermanfaat

Salam Hangat

Agus Haryanto

sumber

http://about-android.blogspot.com/2010/03/sample-google-map-driving-direction.html

68 comments to Tutorial Android Google Map Direction

  • afan

    wow…keren mas tutor nyaa

  • Hezby Islami

    wah akhirnya ada tutornya juga mas, makasi sebelumnya udah dibuat tutor ini.
    saya mau coba dulu πŸ™‚

  • akhirnya ada tutorial baru setelah sekian bulan..:)
    keep on mas…tutorialnya berguna banget..

  • indra

    bang kalo seumpama tracking nya sampe melewati laut gmana bang??? algoritmanya masih berlaku ga??

  • pandji

    bang misalNya dari kasus rumah makan padang kita mw buat directionNya dari lokasi kita(GPS)ke rumah makan padang terdekat secara otomatis mencari rumah makan terdekat caraNya gmna??

  • sqdzn

    mas, terus terang dulu saya mentok banget di programming.
    logika gak jalan. script gak paham πŸ™
    tapi semenjak kenal blog mas ini. saya mulai mengenal android programming dan java programming.
    jadi makin semangat belajar programming πŸ™‚

    terima kasih untuk tutorial berharga nya. semoga Allah selalu melimpahkan rahmatNya padamu.

    nb: update lagi dong tutut android nya πŸ™‚

  • kok petanya punya saya Pak g’ muncul pdahal saya udah punya key api map dr google dan udah saya Edit main.xml lalu isikan kode berikut:

    kira2 masalahnya dimna Pak mohon penjelasannya… makasih sebelumnya mas … πŸ™‚

  • Sammie89

    tapi misal nampilin directionnya dari tempat yang disearch gmn mas.?
    simulasi: search lokasi A + search lokasi B. trus get direction.
    mohon pncerahannya mas..

  • mantaps tutorialnya, ijin sharing nih πŸ˜€

  • terima kasih mas infonya

  • ario

    tutorialnya bermanfaat bgt buatku mas….
    oiya mas agus, bisa kasih saya pencerahan gak. Gmn cara nampilin suara di google maps API? semacam navigasi untuk belok kiri – belok kanan gt…ane muter2 keliling dunia maya masih belum nemu. atas waktunya saya ucap trima ksih…

  • Wiratama

    wuda dicoba tp kok eror y mas… apany yg salah y,,, wuda persis tk buat sama tp gk mau muncul2 jg,, api key wuda dirubah… smua yg perlu dibuat wuda dibuat…. tp kok tetep eror y… mohon bantuannya mas…

  • Berlian

    berhasil jg akhirnya..
    terimakasih mas agus..tutorialny sangat bermanfaat..

  • jack

    mas klo mau buat direction yg realtime gimana ya..??
    misal saya membuat direction antar satu tempat dengan posisi saya sekarang, trus ketika saya merupa posisi saya dgn mendekati lokasi tersebut maka yang di draw di map nya juga berubah…. πŸ™‚

  • Yusti

    mas saya udah coba debug di hp langsung, directionnya udah muncul tapi kok map nya gak muncul ya? kenapa ya? πŸ™

  • Mantab, Keep Writing.. πŸ™‚

  • arf

    kenapa harus di kali di bagi dengan 1E6??

  • Haha…. udh lama gak berkunjung ke Om Agus!
    Ternyata ada tutor baru!!
    Mantavvv Om!!

    Kebetulan saya mau tanya!
    Software yang bagus untuk browse sqlite apa ya Om??
    jadi kita bisa manipulasi datanya dari luar (bukan dari eclipse,dll)
    datanya bisa diinput terlebih dahulu gitu Om!
    so’alnya datanya banyak!

  • Agus Haryanto

    @OpannapO, Untuk sqlite bisa pakai plugin SQLite Manger di Mozilla Fire Fox

  • risa

    setelah saya coba kok ga’ jalan ya mas ? padahal ga ada errornya..mohon bantuannya , makasih ^^

  • risa

    “android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1047)”
    ini bentu errornya mas..

  • arf

    knp latitude ma longitude nya harus di gabung begitu??

  • Aga

    om Agus saya klo mw menambahkan marker kan menggunakan ItemizedOverlay sedangkan untuk menambahkan direction menggunakan Overlay.. Kira2 memang dibuat terpisah gitu antara marker dengan direction atau bisa dijadikan satu overlay,, misalny di dalam ItemizedOverlay atau Overlay??

  • Haris

    mas mau nanya,,tu bisa ga klo nentuin arah yg laen selain ragunan ke tmii..

  • Agus Haryanto

    @haris, tentu bisa πŸ™‚

  • Haris

    tp tanpa mengubah kodingan’a..??

  • anda

    mas,,misalnya gini
    saource itu posisi kita skrg(siftnya dinamis)ngmbil dr latitude ama longitude kita
    destination ud ada di dbase mysql..dan ud dpt di parsing..
    skrg mentok di data posisi kita sekrg..
    gmn cara amabil koordinat lat ama long kita skrg??
    bngung mas..:))

  • hannyfah

    ilmu yang sangat bermanfaat sekali…. πŸ™‚

  • Bos mengapa ketika di run , hanya direction saja yang keluar ? untuk Map nya tidak keluar ..

  • andrian

    mas,,,untuk mendapatkan jarak tempuh dari direction itu gmn?

  • rudy

    mas agus, saya udah tulis semua coding tapi pada emulator muncul pesan “the appilcation BelajarDirectori has stopped unexpectedly. please try again” itu solusi nya gimana mas… mohon jawabanya…

  • joel

    aslm wr wb
    tq mas, sangat bermanfaat..
    begini mas, saya sedang lg ngerjain tugas akhir tntang GPS dan android yaitu tentang pelacakan keberadaan mobil.
    nah, saya yg bangun aplikasi android nya mas, saya mengambil/menerima data lattitude dan longitude tersebut dari server gps(di bangun oleh temen saya) lalu menampilkan nya k dalam maps android dan membuat direction juga ..
    saya bingung bagaimana cara nya agar si android bisa menerima data latt dan longt dan menjadikan nya direction,
    mohon jawaban nya mas agus..
    terima kasih

  • margareth

    trimaskaih mas, turtorialnya sangat bermanfaat.

    mas, saya mau menambahkan layer pembagian lokasi yang dibedakan berdasarkan warna. bagaimana y mas caranya?

    trimakasih

  • Ryan

    pak mau tanya nii …
    kalo posisi awalnya berdasarkan kita ada dimana itu caranya gmana pak ?

  • om, mau nanya neah …”,-
    kalo buat marker untuk lebih dari satu daerah, gimana caranya yah …?
    _________________
    trus, kalo misalnya saya mau tandai satu daerah misal daerah A yang dah ada lat + log nya dah ada ..”,-
    misalnya untuk daerah A, warnanya kuning untuk penghasil karet, bisa g tuh om klo di android …?

    salam kenla yah om …

  • dhikaaphex

    pak saya mau tanya kalo lokasi awal kita tentukan dari posisi kita dari gps itu bagaimana ya logikanya??
    yang saya baca sepertinya aplikasi yang ini harus di gabung dengan aplikasi yang ada di http://agusharyanto.net/wordpress/?p=480 pak itu gimana ya pak???

    terimakasih

  • ridho

    tutorial nya keren mas,
    tp pas saya coba ada masalah nih, gambar map-nya gag muncul,
    kira-kira kenapa ya?
    mohon solusinya!
    thanks πŸ™‚

  • makasih mas buat tutor nya..
    saya mau nanya, bagaimana jika kita mau buat marker di kedua titik di titik awal dan akhir..misalnya satu marker di titik ragunan dan satu lagi di titik tamanmini? mohon bantuannya..

  • heri

    sebelumnya makasih maz buat tutorX…
    saya mau nanya nih maz…dulu saya pernah nyoba tutor ni dan jalan dengan baik tp kok sekarang tiba2 g jlan maz ya…
    error:”unable to start activity component info”…
    mohon pencerahan dan bantuanX maz..
    thanks

  • Mas, agus mau bertanya?
    sebelumnya saya sudah mencoba codingan diatas dan semua berjalan lancar(Bulan Juli).
    sekarang saya coba run kok tidak bisa jalan lagi ya mas.
    kalau saya coba link “http://…” parameter seperti diatas, output berupa kml tidak bisa didownload.
    yang muncul langsung direction dari google maps “from:.. To:..” ?
    Bagaimana URL supaya dapat file KMLnya lagi..
    Terimakasih banyak Sebelumnya..

  • wahyono

    mas kodingan itu udah ga bisa dipakai lagi…
    jika saya try catch akan muncul filenotfound yang kemungkinan besar sudah tak di support lagi mas agus…
    berdasarkan web google https://developers.google.com/maps/documentation/directions/
    hanya disupport 2 saja yaitu json dan xml

  • tika

    Mas, kok skrg jadi gabisa digunain ya kodingan nya. Awalnya saya buat bisa, pas di coba running lagi skrg jadi force close terus

  • Agus Haryanto

    @tika, ia sekarang direction dengan jml sudah tidak disupport google sejak 27 Juli 2012, alternatifnya bisa menggunakan ini http://agusharyanto.net/wordpress/?p=722

  • Agus Haryanto

    @wahyono, kml sudah tidak disupport google, alternatifnya coba disini http://agusharyanto.net/wordpress/?p=722

  • kajai

    Mas mw nx ?agar petanya bisa diputar dan dimiringkan gimana listingnya Mas ???
    mksh seblumnya

  • Agus Haryanto

    @kajai, ini maksudnya Augmented Reality ?

  • mas mau nanya tu node jalannya ngambil dari google maps ya..?
    luw iya gmn cara kita membuat sendiri node jalanya di google maps… ?

  • Agus Haryanto

    @whelly, coba pelajari tentang polyline googlemaps

  • kajai

    Bukan Mas ! supaya petanya bisa dinavigasi mas !!misalnya bisa dimiringkan sama bisa dirotasi (diputar) Mas,,mhon tutornya Mas..!!!thx seblumnya.

  • Agus Haryanto

    @kajai, memangnya mau buat aplikasi apa ?

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>