Simple Google Map Viewer di Android

Kali ini saya ingin berbagi salah satu keunggulan Android yaitu menampilkan peta dari Google Map. Peta ini dapat dikembangkan lagi menjadi GPS, LSB (Location Base Service) atau lainnya. Pada artikel kali ini, saya hanya ingin berbagi cara sederhana menampilkan peta berdasarkan koordinat (Latitide dan Longitude). Sebelumnya kita harus mendaftarkan API Key untuk bisa menggunakan Maps Baca Cara Mendaftarkan API Key.

Baiklah, pertama kita buat sebuah project Android:

Pada pilihan targer Built, pilih Google APIs. Jika belum ada, harus download dulu Google APIs nya agar bisa menjalankan aplikasinya.

Secara otomatias akan ter-create tiga file utama yaitu: SimpleMapViewerActivity.java, main.xml dan strings.xml.

Pada file main.xml ganti source nya menjadi:

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

<EditText
 android:id="@+id/lat"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:hint="@string/latitude"
 />
 <EditText
 android:id="@+id/lon"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:hint="@string/longitude"
 />
 <Button
 android:id="@+id/btnShowMap"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/btnShowMap"
 />
</LinearLayout>

pada file strings.xml ditambahkan menjadi:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <string name="app_name">SimpleMapViewer</string>
 <string name="latitude">latitude</string>
 <string name="longitude">longitude</string>
 <string name="btnShowMap">Show Map</string>
</resources>

File SimpleMapViewerActivity.java ditambahkan menjadi:

package org.pizaini.mapviewer;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
public class SimpleMapViewerActivity extends Activity {
 private EditText etLat;
 private EditText etLon;
 private Button btnShowMap;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 initComponents();
 btnShowMap.setOnClickListener(new View.OnClickListener() {
 public void onClick(View v) {
 Intent intent = new Intent(getBaseContext(), MyMapActivity.class);
 Double latt = Double.valueOf(etLat.getText().toString());
 Double lonn = Double.valueOf(etLon.getText().toString());
 intent.putExtra("lat", latt);
 intent.putExtra("lon", lonn);
 startActivity(intent);
 }
 });
 }

 private void initComponents(){
 etLat = (EditText) findViewById(R.id.lat);
 etLon = (EditText) findViewById(R.id.lon);
 btnShowMap = (Button) findViewById(R.id.btnShowMap);
 }
}

Source di atas hanyalah menampilkan dua edit text dan satu button. Edit text nantinya digunakan untuk mengisi koordinat latitude dan longitude. Button memiliki aksi untuk menampilkan peta berdasarkan koordinat yang dimasukkan. Button mempunyai aksi:

Intent intent = new Intent(getBaseContext(), MyMapActivity.class);
//konversi nilai string ke double
 Double latt = Double.valueOf(etLat.getText().toString());
 Double lonn = Double.valueOf(etLon.getText().toString());
//menambhakn nilai extra untuk mengirimkan nilai ke activity selanjutnya
 intent.putExtra("lat", latt);
 intent.putExtra("lon", lonn);
//start Map Activity
 startActivity(intent);

Untuk menampilkan peta pada device, kita membutuhkan sebuah tampilan layout. Buatlah sebuah file di direktori layout “mapviewer.xml” dan tambahkan source berikut:

<?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:clickable="true"
 android:apiKey="0Fh4Ye5kM3FL2A7Km1dh1YV5O5-QKabJb7PL_gw"
 />

</RelativeLayout>

Perlu diingat bahwa apiKey didapat dengan generate pada masing-masing installer java. Baca Cara Mendaftarkan API Key. Agar peta tersebut dapat ditampilkan, kita memerlukan Map Activity. Buat file MyMapActivity.java pada paket yang sama dengan file java di atas.

package org.pizaini.mapviewer;
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.MapView;
public class MyMapActivity extends MapActivity{
 private MapView mapView;

 @Override
 protected void onCreate(Bundle icicle) {
 super.onCreate(icicle);
 setContentView(R.layout.mapviewer);
 initComponents();
//zoom control di device
 mapView.setBuiltInZoomControls(true);
//mangambil nilai extra
 double lat = getIntent().getExtras().getDouble("lat");
 double lng = getIntent().getExtras().getDouble("lon");

 GeoPoint point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));
 mapView.getController().animateTo(point);
 mapView.getController().setZoom(15);
 }

 private void initComponents(){
 mapView = (MapView) findViewById(R.id.mapView);
 }

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

Jangan lupa menambahkan permision ‘android.permission.INTERNET‘ dan <uses-library android:name=”com.google.android.maps”/>. Sehingga file AndroidManifest.xml menjadi:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="org.pizaini.mapviewer"
 android:versionCode="1"
 android:versionName="1.0" >

 <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="8"/>
 <uses-permission android:name="android.permission.INTERNET"/>
<application
 android:icon="@drawable/ic_launcher"
 android:label="@string/app_name" >
 <activity
 android:name=".SimpleMapViewerActivity"
 android:label="@string/app_name" >
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 </activity>
 <activity android:name="MyMapActivity"></activity>
 <uses-library android:name="com.google.android.maps"/>
 </application>
</manifest>

Hasilnya adalah tampilan isian (text field). Isikan dengan koordinat Latitude dan Longitude. Misalnya Latitude: 0.490076 dan Longitude 101.434894.

Kemudian klik tombol ‘Show Map’, maka akan tampil peta sesuai dengan koordinat yang telah dimasukkan.

Download Eclipse Project SimpleMapViewer.rar

Semoga bermanfaat. Terima Kasih………