Android Draw Line On GoogleMap (Android Menggambar garis pada GoogleMap)

Android Draw Line On GoogleMap (Android Menggambar garis pada GoogleMap).
Beberapa waktu yang lalu ada pembaca yang menanyakan kepada saya, ingin membuat aplikasi jalur angkot. Apakah dimungkinkan untuk menggambar garis yang bukan direction (otomatis dibuat oleh google). Sebetulnya kalau kita mencari jawabannya digoogle itu dapat kita dapatkan. Tapi syaratnya keywordnya gunakan bahasa inggris. Oke langsung saja pada kesempatan ini kita akan membuat project yang goalnya adalah Menggambar Garis pada GoggleMap (Draw Line in GoogleMap Android).

Mari kita ikuti langkah-langkanya

1. Buka Eclipse lalu buat New Android Project, isi parameternya dengan dibawah ini

Application Name	DrawLineMap
Project Name	DrawLineMap
Package Name	com.agus.haryanto.net.draw.linemap
Activity Name	DrawLineMapActivity
Layout Name	main

2. Edit File main.xml

<?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="0bvY2ipiUvzSKVO0TO4N8iIeWp4oSfPY7TcUUTQ"
        />

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

</RelativeLayout>

note: android:apiKey harus diganti dengan key map yang kita dapatkan dari google. caranya ada pada tutorial map yang awal.
3. Edit AndroidManifest.xml lalu ketikkan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.agus.haryanto.net.draw.linemap"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
         <uses-library android:name="com.google.android.maps" />
        <activity
            android:name=".DrawLineMapActivity"
            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>

</manifest>

4. Edit class DrawLineMapActivity.java lalu ketikan kode berikut

package com.agus.haryanto.net.draw.linemap;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Point;
import android.os.Bundle;

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

public class DrawLineMapActivity extends MapActivity {
	private List<Overlay> mapOverlays;

	private Projection projection;
	private MapView mapView = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
	    super.onCreate(savedInstanceState);
	    setContentView(R.layout.main);

	    mapView = (MapView) findViewById(R.id.mapview);
	    mapView.setBuiltInZoomControls(true);
	    mapView.getController().setZoom(13);
	    GeoPoint gP1 =new GeoPoint((int) (-6.144651 * 1E6), (int) (106.728058 * 1E6));
	    mapView.getController().animateTo(gP1);
	    // overlay which may be displayed on top of a map
	    mapOverlays = mapView.getOverlays();
	    //translate between the coordinate system of x/y on-screen pixel coordinates
	    //and that of latitude/longitude points on the surface of the earth
	    projection = mapView.getProjection();
        mapView.postInvalidate();
	    mapOverlays.add(new MyOverlay());

	}

	@Override
	protected boolean isRouteDisplayed() {
	    return false;
	}

	class MyOverlay extends Overlay{

	    public MyOverlay(){

	    }
	    private  List<GeoPoint> points = new ArrayList<GeoPoint>();
	    public void draw(Canvas canvas, MapView mapv, boolean shadow){
	        super.draw(canvas, mapv, shadow);

	        Paint   mPaint = new Paint();
	        mPaint.setDither(true);
	        mPaint.setColor(Color.RED);
	        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
	        mPaint.setStrokeJoin(Paint.Join.ROUND);
	        mPaint.setStrokeCap(Paint.Cap.ROUND);
	        mPaint.setStrokeWidth(2);

	        GeoPoint gP1 =new GeoPoint((int) (-6.144651 * 1E6), (int) (106.728058 * 1E6));
	        GeoPoint gP2 =new GeoPoint((int) (-6.174689 * 1E6), (int) (106.732178 * 1E6));
	        GeoPoint gP3 =new GeoPoint((int) (-6.178785 * 1E6), (int) (106.747284 * 1E6));
	        GeoPoint gP4 =new GeoPoint((int) (-6.161718 * 1E6), (int) (106.775436 * 1E6));
	        points.clear();
	        points.add(gP1);
	        points.add(gP2);
	        points.add(gP3);
	        points.add(gP4);
	        Point p1 = new Point();
	        Point p2 = new Point();
	        Path path = new Path();

	       for  (int i=0;i < points.size()-1; i++){
	        	 projection.toPixels(points.get(i), p1);
	        	 projection.toPixels(points.get(i+1), p2);
	        	  path.moveTo(p2.x, p2.y);
	        	  path.lineTo(p1.x,p1.y);
	        }
	        canvas.drawPath(path, mPaint);

	    }
}
}

5. Saatnya kita Run Programnya, jika sudah benar semua maka tampilannya akan terlihat seperti dibawah ini

Untuk Penjelasan Singkat Kodenya bisa dilihat di

Semoga Bermanfaat

Salam Hangat Android Developer

Agus Haryanto

Android Trainer & Seminar Speaker