Belajar Membuat Marker

Assalamu Alaikum Wr.Wb,

Pada kesempatan kali ini, saya akan berbagi tutorial tentang cara membuat marker atau tanda pada google map. Koordinat yang akan kita gunakan adalah STMIK AKBA Makassar dengan latitude = -5.141897 dan longitude = 119.484735.

gambar marker 

 gambar satelit

gambar street

Oke langsung saja ke TKP..... hehe



1. Buat project (BelajarMarker)
2. Pilih target device yang akan digunakan (mis. Android 2.2 Froyo)
3. Pilih compile APIs (karena kita menggunakan google map)
4. Beri nama activitynya Main (.java) dan main (.xml)
5. Adapun coding untuk main.xml yaitu

<?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"

    android:orientation="vertical" >



    <com.google.android.maps.MapView

        android:id="@+id/mapView"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:apiKey="APIs Key dari Google"

        android:clickable="true"

        android:enabled="true" />



    <LinearLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"

        android:orientation="vertical" >



        <Button

            android:id="@+id/btnSatelit"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="@drawable/satelit"

            android:onClick="btnSatelitClick"

            android:text="Satelit" />



        <Button

            android:id="@+id/btnJalan"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="@drawable/street"

            android:onClick="btnJalanClick"

            android:text="Street" />

    </LinearLayout>



</RelativeLayout>

6. Adapun coding untuk Main.java

package com.bas.belajarmarker;



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.agus.R;

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(-5.141897,119.484735));

        mapView.getController().setZoom(17);

        

        Drawable marker = getResources().getDrawable(R.drawable.marker);

        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(-5.141897,119.484735),"Jln. Perintis Kemerdekaan","Makassar"));

            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());

        }

    }


} 

7. Pada bagian AndroidManifest ganti dengan kode berikut :

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.agus"

    android:versionCode="1"

    android:versionName="1.0" >



    <application

        android:icon="@drawable/icon"

        android:label="@string/app_name" >

        <uses-library android:name="com.google.android.maps" />



        <activity

            android:name="com.bas.belajarmarker.Main"

            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-sdk android:minSdkVersion="8" />



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

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    

</manifest> 

8. Run project (Ctrl + F11)

 Tampilan  Mode Street

Tampilan  Mode Satelit

Belajar dan berbagi bersama.... :)

Wassalam.