//
you're reading...
Android, Pemrograman, Umum

Membuat Marker pada Google Maps di Android


Pada tulisan sebelumnya Google Maps #1 dan Google Maps #2, telah dipaparkan bagaimana awal mula memuat Google Maps di Android. Sekarang saya akan menjelaskan cara membuat marker pada Android seperti gambar berikut.

Langkah-langkahnya sebagai berikut:

  1. Tambahkan baris kode berikut pada AndroidManifest.xml diluar tag Application

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    
  2. Buatlah main.xml menjadi:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	android:orientation="vertical" 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="0h8DOFp0FpPnnHBq0EZspqK9q2Kn0JwQc4v-JNQ" />
    
    	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    		android:orientation="vertical" android:layout_width="wrap_content"
    		android:layout_height="wrap_content" android:layout_alignParentBottom="true"
    		android:layout_alignParentRight="true">
    		<Button android:id="@+id/btnSatelit" android:layout_width="wrap_content"
    			android:layout_height="wrap_content" android:text="Satelit"
    			android:layout_x="258px" android:layout_y="5px" android:onClick="btnSatelitClick" />
    
    		<Button android:id="@+id/btnJalan" android:layout_width="wrap_content"
    			android:layout_height="wrap_content" android:text="Street"
    			android:layout_x="258px" android:layout_y="3px" android:onClick="btnJalanClick" />
    
    	</LinearLayout>
    </RelativeLayout>
    
  3. Isikan Main.java, sehingga kodenya seperti berikut:

    import java.util.ArrayList;
    import java.util.List;
    
    import android.graphics.Canvas;
    import android.graphics.drawable.Drawable;
    import android.os.Bundle;
    import android.view.KeyEvent;
    import android.view.View;
    import android.widget.Toast;
    
    import com.google.android.maps.GeoPoint;
    import com.google.android.maps.ItemizedOverlay;
    import com.google.android.maps.MapActivity;
    import com.google.android.maps.MapView;
    import com.google.android.maps.MyLocationOverlay;
    import com.google.android.maps.OverlayItem;
    
    public class Main extends MapActivity {
        /** Called when the activity is first created. */
    	private MapView mapView = null;
    	private MyLocationOverlay me = 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().setCenter(getPoint(-6.974681,107.56531));
            mapView.getController().setZoom(17);
            
            Drawable marker = getResources().getDrawable(R.drawable.marker1);
            marker.setBounds(0,0,marker.getIntrinsicWidth(),marker.getIntrinsicHeight());
            mapView.getOverlays().add(new SitesOverlay(marker));
            
            me = new MyLocationOverlay(this, mapView);
            mapView.getOverlays().add(me);
        }
        
        protected boolean isRouteDisplayed() {
            // TODO Auto-generated method stub
            return false;
        }
        
        public void btnSatelitClick(View v){
        	mapView.setStreetView(false);
        	mapView.setSatellite(true);
        }
        
        public void btnJalanClick(View v){
        	mapView.setStreetView(true);
        	mapView.setSatellite(false);
        }
        
        public void onResume() {
        	super.onResume();
        	
        	me.enableCompass();
        }
        
        public void onPause() {
        	super.onPause();
        	
        	me.disableCompass();
        }
        
        public boolean onKeyDown(int keyCode, KeyEvent event) {
        	if(keyCode == KeyEvent.KEYCODE_S) {
        		mapView.setSatellite(!mapView.isSatellite());
        		return true;
        	} else if(keyCode == KeyEvent.KEYCODE_Z) {
        		mapView.displayZoomControls(true);
        		return true;
        	}
        	
        	return (super.onKeyDown(keyCode, event));
        }
        
        private GeoPoint getPoint(double lat, double lon) {
        	return (new GeoPoint((int)(lat*1000000.0), (int)(lon*1000000.0)));
        }
        
        private class SitesOverlay extends ItemizedOverlay<OverlayItem>{
        	private List<OverlayItem> items = new ArrayList<OverlayItem>();
        	private Drawable marker = null;
        	
        	public SitesOverlay(Drawable marker) {
        		super (marker);
        		this.marker = marker;
        		
        		items.add(new OverlayItem(getPoint(-6.974681,107.56531),"Jln. Kopo Sayati","Bandung"));
            	populate();
        	}
        	
        	
        	protected OverlayItem createItem(int i) {
            	return (items.get(i));
            }
            
            public void draw(Canvas canvas, MapView mapView, boolean shadow) {
            	super.draw(canvas,mapView,shadow);
            	
            	boundCenterBottom(marker);
            }
            
            protected boolean onTap(int i) {
            	Toast.makeText(getBaseContext(), items.get(i).getSnippet(), Toast.LENGTH_SHORT).show();
            	return true;
            }
            
            public int size() {
            	return(items.size());
            }
        }
    }
    
  4. Tambahkan gambar pada res/drawable-hdpi dengan nama marker1, atau bisa Anda cari sendiri ingin gambar/marker seperti apa.

Terima Kasih.

Happy Coding. J

Iklan

About Rendy Faqot

Adalah Sarjana Komputer dari jurusan Ilmu Komputer Universitas Pendidikan Indonesia 2008. Menyelesaikan studi selama 5 tahun yang penuh dengan lika-liku kehidupan mahasiswa sebagaimana mahasiswa normal pada umumnya. Tertarik dengan bidang Data Mining, Natural Language Processing, dan Mobile Development. InsyaAllah, mohon doa-nya agar bisa melanjutkan studi master untuk bidang tersebut. Pernah mencicipi dunia industri sebagai Analyst Programmer di Fujitsu Indonesia dan PT. BSP. Saat ini berdomisili di Bandung dan akan melanjutkan kehidupan di Bandung (untuk sementara).

Diskusi

3 thoughts on “Membuat Marker pada Google Maps di Android

  1. waaahhhh blom pernah nich sob hehehehehehehe……

    salam persahabatan selalu dr MENONE

    Posted by menone | 22 Juni 2011, 16:45
  2. wah kren banget ini tutorialnya
    terimaksih banyak mas
    oya mas kalau mau buat marking nya lebih dari 2 atau sekali marking nya 5 gimana itu mas
    terimaksih sekali lagi ma

    Posted by gultom | 30 Juli 2012, 13:08

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

%d blogger menyukai ini: