Jumat, 31 Mei 2013

Tutorial Android Maps Api v2

Okey saya update lagi blog saya ini, sudah denger/baca kan kalo google sudah mengupdate Maps API nya menjadi V2, nah jika anda sebelumnya sudah pernah develop aplikasi android yang menggunakan maps V1, pasti pada ndak jalan.. :D holy…

Dalam artikel kali ini saya akan membahas bagaimana cara penggunaan Google Maps API v2 pada android, kita mulai dari membuat project baru..

Sebelumnya pastikan pada SDK Manager sudah terinstall Google Play Services..
android maps api v2 tutorial 1
android maps api v2 tutorial 1

Setelah google play service terinstall langkah selanjutnya adalah mengImport library yang diperlukan, sekarang google sudah menyiapkan library tersendiri untuk Maps nya :D

Klik Menu File Import > General > Existing Project into Workspace > Browse
masuk ke direktori Android SDK anda.. lihat gambar berikut :
android maps api v2 tutorial 2
android maps api v2 tutorial 2

Kemudian buat project android baru.. sehingga bentuk jadinya seperti ini..
android maps api v2 tutorial
android maps api v2 tutorial

Setelah selesai membuat project android baru, langkah selanjutnya anda menambahkan library Google Play yang sebelumnya kita import ke project kita.. caranya..

Klik Kanan Project > Properties > Masuk ke bagian android > Add
lihat gambar berikut :
android maps api v2 tutorial 3
android maps api v2 tutorial 3

Oke, sampai fase ini anda sudah memiliki sebuah project yang akan digunakan untuk menampilkan Maps, langkah selanjutnya anda mendapatkan API Key untuk Google Mapsnya sendiri.. caranya adalah :
masuk ke
1https://code.google.com/apis/console/
ikuti petunjuk biasanya jika awal2 sih minta license aggrement.. :D , jika sudah anda akan dibawa ke jendela pembuatan project baru, buat project baru jika sudah maka tampilannya akan seperti dibawah ini..
android maps api v2 tutorial 4
android maps api v2 tutorial 4

langkah selanjutnya masuk ke menu services, pastikan Google Maps Android API v2 dalam keadaan ON
android maps api v2 tutorial 5
android maps api v2 tutorial 5

selanjutnya anda tinggal membuat key untuk android apps, namun sebelumnya kita harus memiliki SHA1 certificate fingerprint.
cara mendapatkan sha1 : masuk CMD
yang kita cari disini adalah debug.keystore, pada sistem operasi windows, secara default posisi debug.keystore berada di folder .android..
android maps api v2 tutorial 6
android maps api v2 tutorial 6

setelah masuk kedalam folder tersebut, pastekan code berikut ini:
1keytool -list -alias androiddebugkey -keystore debug.keystore -storepass android -keypass android -v
jika berhasil maka kita akan mendapatkany key nya..
android maps api v2 tutorial 7
android maps api v2 tutorial 7

ambil kunci SHA1 yang kita dapat, dan kembali ke browser.. masukkan kunci SHA1 dan ditambahi nama package applikasi kita.. contoh
145:B5:E4:6F:36:AD:0A:98:94:B4:02:66:2B:12:17:F2:56:26:A0:E0;id.pratama.maps
id.pratama.maps, adalah nama package aplikasi yang saya buat.
Maka hasilnya akan seperti berikut :
android maps api v2 tutorial 9
android maps api v2 tutorial 9

Api Key sudah didapat, kembali ke Eclipse lagi.. buka file AndroidManifest.xml, pada Maps API V2, api key kita tempatkan pada file manifestnya tidak seperti V1 yang langsung pada file layout xml nya..
maka jadinya file AndroidManfest yang lengkap seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="id.pratama.cobamaps"
 android:versionCode="1"
 android:versionName="1.0" >
 <uses-sdk
  android:minSdkVersion="8"
  android:targetSdkVersion="16" />
 <permission
  android:name="id.pratama.cobamaps.permission.MAPS_RECEIVE"
  android:protectionLevel="signature" >
 </permission>
 <uses-permission android:name="id.pratama.cobamaps.permission.MAPS_RECEIVE" />
 <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 <uses-feature
  android:glEsVersion="0x00020000"
  android:required="true" />
 <application
  android:allowBackup="true"
  android:icon="@drawable/ic_launcher"
  android:label="@string/app_name"
  android:theme="@style/AppTheme" >
  <!-- Google Maps API V2 -->
  <meta-data
   android:name="com.google.android.maps.v2.API_KEY"
   android:value="API_KEY_MU" />
  <activity
   android:name="id.pratama.cobamaps.MainActivity"
   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> 
 
kita tambahkan fragment unutk mapsnya..

Kemudian pada file MainActivity dirubah menjadi seperti ini..
 
package id.pratama.cobamaps;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;
public class MainActivity extends FragmentActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
} 
 
jika dijalankan akan seperti tampilan berikut :
android maps api v2 tutorial 10
 

Selanjutnya adalah menambahkan marker atau penanda lokasi diatas maps kita, sebelumnya pada API V1 untuk menambahkan marker kita butuh sebuah class yang mengExtends class ItemizedOverlays, namun setelah diupdatenya API V2 kita tidak lagi membutuhkan class tersebut, sudah ada class MarkerOptions yang bisa kita gunakan untuk menambahkan marker ke maps kita..
rubah file MainActivity.java menjadi seperti berikut :

package id.pratama.cobamaps;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity
{
private GoogleMap map;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setupMap();
}

private void setupMap()
{
if (map == null)
{
map = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.maps)).getMap();
if (map != null)
{
map.addMarker(new MarkerOptions().position(new LatLng(-7.841785, 110.469904)).title("Pyong yang City").snippet("Pratama here"));
map.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(-7.841785, 110.469904),10));
}
}

}

} 
 
baris kode yang perlu diamati adalah pada method setupMap();, disana terdapat baris code
map.addMarker(new MarkerOptions().position(new LatLng(-7.841785, 110.469904)).title("Pyong yang City").snippet("Pratama here"))
 
pada code ini saya menambahkan marker pada posisi Latitude = -7.841785 dan Longitude= 110.469904, class LatLng merupakan class baru yang ditambahkan oleh google pada library google maps yang baru ini :D .
kemudian code berikut

map.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(-7.841785, 110.469904),10));

maksudnya adalah saya menggerakkan camera agar posisi dengan LatLng(-7.841785, 110.469904) berada di tengah, dengan zoom factor yang saya gunakan bernilai 10.
maka hasil akhirnya adalah sebagai berikut :
android maps api v2 tutorial 13
android maps api v2 tutorial 13
 
  


 


Tidak ada komentar:

Posting Komentar

news