Kita telah menyaksikan pertumbuhan yang tinggi dalam apps mobil dalam beberapa tahun terakhir. Salah satu kategori app yang sangat populer adalah location-based services atau yang serung disebut dengan LBS. Apps LBS akan melacak lokasi, dan mungkin menawarkan layanan tambahan misalnya lokasi fasilitas terdekat, dan juga menawarkan anjuran rencana rute terdekat/tercepat, dsb. Tentu, salah satu kunci utama dalam app LBS adalah map/peta, yang akan memberikan gambaran visual dari lokasi kita.
Dalamn latihan topik ini, kita akan mempelajari bagaimana menggunakan Google Maps di dalam app Android kita, dan bagaimana memodifikasinya melalui program. Selain itu, kta juga akan mempelajari bagaimana mendapatkan lokasi geografis dengan menggunakan class 'LocationManager' yang disediakan Android SDK.
1. Pastikan di Android Studio kita sudah di-install Google Play services SDK (lihat panduan di link berikut https://developer.android.com/studio/intro/update.html)
2. Buat Project Google Maps.
- Buka Android Studio
- Buat project baru seperti berikut:
- Masukkan nama app, company domain, dan project location, seperti biasanya. Klik 'Next'.
- Pilih 'Google Maps Activity' pada kotak dialog 'Add an activity to Mobile'. Klik 'Next'
- Masukkan nama activity, nama layout, dan judul app seperti biasa. Nama-nama default juga sudah bagus. Kemudian klik 'Finish'.
Android Studio akan memulai Gradle dan mem-build project kita. Mungkin akan perlu waktu beberapa saat.
Ketika proses build sudah selesai, Android Studio akan membuka file-file 'google_maps_api.xml' dan 'MapsActivity.java' di editor. (Mungkin 'acitivity' tersebut akan memiliki nama yang berbeda tergantung pada proses konfigurasi sebelumnya yang baru saja dilakukan). Perhatikan bahwa file 'google_maps_api.xml' berisi panduan untuk mendapatkan Google Maps API key' sebelum kita bisa menjalankan app.
3. Ambil Google Maps API-key
App kita perlu API-key untuk mengakses server Google Maps. Jenis key yang kita perlukan adalah suatu API-key dengan batasan untuk 'Android apps'. Key ini gratis. Kita bisa menggunakannya dengan app apapun yang memanggil Android API untuk Google Maps, dan bisa mendukung jumlah pengguna yang tak terbatas.
Berikut adalah salah satu cara untuk mendapatkan API-key dari Android Studio:
- Cara paling cepat dan mudah: Gunakan link yang disediakan di file 'google_maps_api.xml' yang sudah dibuatkan oleh Android Studio:
- Copy link yang sudah disediakan di dalam file 'google_maps_api.xml' dan paste ke browser. Link tersebut akan membawa kita ke Google API Console dan memberikan informasi yang diperlukan Google API Console melalui parameter-parameter URL, sehingga mengurangi proses input manual yang seharusnya kita lakukan.
- Ikuti petunjuk-petunjuknya untuk membuat project baru pada Google API Console atau pilih 'existing project'.
- Buat API-key yang terbatas hanya untuk Android untuk project kita.
- Copy API-key yang dihasilkan, dan kembali lagi ke Android Studio, dan paste API-key ke dalam elemen <string> di dalam file 'google_maps_api.xml'
- Cara yang sedikit lebih lambat: Gunakan credentials yang ada di dalam file 'google_maps_api.xml' yang tadi dibuatkan oleh Android Studio:
- Copy credentials yang ada di dalam file 'google_maps_api.xml'
- Masuk ke Google API Console melalui browser
- Gunakan credentials yang sudah di-copy untuk menambahkan app kita ke API-key yang sudah ada untuk membuat API-key yang baru.
- Bila kedua cara tersebut tidak berhasil, ikuti proses yang lengkap di: https://developers.google.com/maps/documentation/android-api/signup
4. Periksa kode yang dihasilkan dari template di Android Studio tadi. Terutama file-file berikut dalam project Android Studio kita.
File XML layout
Secara default, file XML yang mendefinisikan layout app kita ada di "res/layout/activity_maps.xml". Isinya adalah kode berikut ini:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/map"
tools:context=".MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment" />
File Java: MapsActivity.java.
Isinya adalah kode berikut di bawah nama package kita:
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {
private GoogleMap mMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
// Add a marker in Sydney, Australia, and move the camera.
LatLng sydney = new LatLng(-34, 151);
mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
}
}
Bila file 'MapsActivity.java' tidak berisi kode seperti di atas tersebut, gantilah isi file dengan kode di atas tersebut, di bawah nama package.
5. Build dan run app tersebut
Di Android Studio jalankan app tersebut. Bisa menggunakan perangkat riil maupun emulator di Android Studio. Setelah beberapa menit app akan terbuka dan seharusnya kita bisa melihat suatu peta dengan posisi penanda di atas Sidney, Australia. Bila peta tidak muncul, pastikan bahwa semua tahap yang dijelaskan di laman ini sudah dilalui semua, terutama pastikan bahwa API-key sudah ditambahkan. Berikut di bawah ini adalah gambar peta yang ditampilkan dalam Android Emulator.
Penjelasan:
1. Kita tambahkan elemen <fragment> ke file layout 'activity_maps.xml'. Elemen ini berfungsi untuk mendefinisikan class 'SupportMapFragment' untuk bertindak sebagai kontainer untuk map/peta dan memberikan akses ke object 'GoogleMap'. Latihan ini menggunakan versi library dari map fragment, untuk memastikan 'backward compatibility' dengan versi terdahulu dari 'Android framework'.
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.location.MapsActivity" />
2. Di dalam method 'onCreate()' pada 'activity' kita, seperti biasa tetapkan file layout sebagai tampilan app kita. Kemudian kita dapatkan suatu 'handle' untuk menangani 'fragment' map/peta dengan memanggil 'FragmentManager.findFragmentById()'. Kemudian kita gunakan 'getMapAsync()' untuk me-register map/peta:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
/*Mendapatkan SupportMapFragment dan mendapatkan notofikasi bila map/peta siap digunakan*/
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
3. Kita implementasikan interface 'OnMapReadyCallback' dan melakukan override pada method 'onMapReady()', untuk men-set map/peta bila object 'GoogleMap' ada:
public class MapsMarkerActivity extends AppCompatActivity
implements OnMapReadyCallback {
/* method OnCreate() ada disini, seperti yang dijelaskan di atas*/
@Override
public void onMapReady(GoogleMap googleMap) {
/* Add a marker in Sydney, Australia,
and move the map's camera to the same location*/
LatLng sydney = new LatLng(-33.852, 151.211);
googleMap.addMarker(new MarkerOptions().position(sydney)
.title("Marker in Sydney"));
googleMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
}
}
Secara default, API Android Google Maps akan menampilkan isi info bila user men-tap 'marker'. Kita tidak perlu menambahkan suatu 'click listener' untuk 'marker' tersebut bila kita sudah menggunakan 'behavior' default tersebut.
No comments:
Post a Comment