Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Menampilkan Marker Studio pada Maps [Bagian 8]

Pada tulisan kali ini saya akan membahas bagaimana cara menampilkan Marker Studio pada GoogleMaps. Untuk data lokasi marker (latitude dan longitude) didapat melalui database StudioMusik yag telah dibuat pada tutorial Bagian 6, kemudian data tersebut akan kita jadikan sebuah API dengan bantuan php, dan pada tahap ini akan dijelaskan bagaimana menarik data dari API.

Untuk melihat langkah yang telah dikerjakan sebelumnya, kalian dapat melihatnya pada tautan berikut ini :

• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Project Baru [Bagian 1]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Membuat Splashscreen  [Bagian 2]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Mendapatkan API Key Google Maps [Bagian 3]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Menu Utama [Bagian 4]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Membuat Google Maps Activity [Bagian 5]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: Membuat Database [Bagian 6]
• Tutorial Membuat Aplikasi Mobile GIS Menggunakan Android Studio: API [Bagian 7]

Berikut ini merupakan tahapan untuk menarik data API yang telah dibuat, dan diolah untuk menampilkan data lokasi studio (latitude dan longitude) :

1. Pastikan API yang telah dibuat sudah berbentuk JSON, untuk mengeceknya kalian dapat melihatnya pada link di bawah ini :

API STUDIO MUSIK

2. Jika data API sudah siap, buka project, kemudian pilih build.gradle (module: app). Di sini tambahkan library Volley, fungsi library ini adalah untuk parsing data API ke program. Selain library Volley jika kalian ingin menggunakan cara lainnya bisa menggunakan Retrofit, GSON, atau menggunakan HttpRequest. Berikut code yang harus ditambahkan :

compile 'com.mcxiaoke.volley:library:1.0.19'

Kemudian sinkronasi ulang Gradle kalian, dengan memilih Try Again dipojok kanan atas.

3. Jika sudah, buka MapsActivity.java. Tambahkan code di bawah nama Class untuk deklarasi variabel dan tipe datanya :

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    private String[] nama, alamat, harga, jam, update, alatmusik, call, id,
            gambar, ratingalatmusik, ratingrecording, ratingtempat, distance;
    int numData;
    LatLng latLng[];
    Boolean markerD[];
    private Double[] latitude, longitude;

Lalu buat sebuah method dengan nama getLokasi() yang berada diluar method onCreate. Berikut adalah skripnya :
getLokasi()

 private void getLokasi() {
        String url = "http://cloudofoasis.com/api/Ivan/getStudio.php";
        JsonArrayRequest request = new JsonArrayRequest
                (Request.Method.GET, url, new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        numData = response.length();
                        Log.d("DEBUG_", "Parse JSON");
                        latLng = new LatLng[numData];
                        markerD = new Boolean[numData];
                        nama = new String[numData];
                        alamat = new String[numData];
                        harga = new String[numData];
                        jam = new String[numData];
                        call = new String[numData];
                        update = new String[numData];
                        alatmusik = new String[numData];
                        ratingalatmusik = new String[numData];
                        ratingrecording = new String[numData];
                        ratingtempat = new String[numData];
                        id = new String[numData];
                        gambar = new String[numData];
                        latitude = new Double[numData];
                        longitude = new Double[numData];

                        for (int i = 0; i < numData; i++) {
                            try {
                                JSONObject data = response.getJSONObject(i);
                                id[i] = data.getString("id");
                                latLng[i] = new LatLng(data.getDouble("latitude"),
                                        data.getDouble("longitude"));
                                nama[i] = data.getString("nama");
                                alamat[i] = data.getString("alamat");
                                harga[i] = data.getString("harga");
                                jam[i] = data.getString("jam");
                                call[i] = data.getString("call");
                                update[i] = data.getString("lastupdate");
                                alatmusik[i] = data.getString("alatmusik");
                                ratingalatmusik[i] = data.getString("ratingalatmusik");
                                ratingrecording[i] = data.getString("ratingrecording");
                                ratingtempat[i] = data.getString("ratingtempat");
                                gambar[i] = data.getString("gambar");
                                latitude[i] = data.getDouble("latitude");
                                longitude[i] = data.getDouble("longitude");

                                markerD[i] = false;
                                mMap.addMarker(new MarkerOptions()
                                        .position(latLng[i])
                                        .title(nama[i])
                                        .snippet(alamat[i])
                                        .icon(BitmapDescriptorFactory.fromResource(R.drawable.markerstudio)));
                            } catch (JSONException je) {
                            }
                            mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng[i], 15.5f));
                        }
                    }

                } , new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {
                        AlertDialog.Builder builder = new AlertDialog.Builder(MapsActivity.this);
                        builder.setTitle("Error!");
                        builder.setMessage("No Internet Connection");
                        builder.setIcon(android.R.drawable.ic_dialog_alert);
                        builder.setPositiveButton("Refresh", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                getLokasi();
                            }
                        });
                        AlertDialog alert = builder.create();
                        alert.show();
                    }
                });
        Volley.newRequestQueue(this).add(request);
    }

Pada methode diataslah data API akan ditarik dan akan digunakan untuk menampilkan marker lokasi studio musik.

Logikanya adalah dengan menyimpan data dari API pada variabel Array, kemudian untuk banyaknya penarikan data dilakukan dengan perulangan menggunakan for

 for (int i = 0; i < numData; i++)

Lalu untuk menampilakan marker digunakan fungsi addmarker, dengan position diambil dari Array latLng[i] yang telah berisi data (Latitude dan Longitude). Ditampilkan juga title, snipset, dan icon dari marker itu sendiri seperti skrip di bawah ini :

 mMap.addMarker(new MarkerOptions()
                                        .position(latLng[i])
                                        .title(nama[i])
                                        .snippet(alamat[i])
                                        .icon(BitmapDescriptorFactory.fromResource(R.drawable.markerstudio)));

Lalu untuk penanganan Error yang tidak diinginkan seperti tidak ada koneksi Internet, penulis menanganinya dengan memunculkan dialog alert yang berisi pemberitahuan bahwa tidak ada koneksi internet dan terdapat button refresh untuk me-reload koneksi dengan memanggil kembali method getLokasi(), seperti di bawah ini :

new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {
                        AlertDialog.Builder builder = new AlertDialog.Builder(MapsActivity.this);
                        builder.setTitle("Error!");
                        builder.setMessage("No Internet Connection");
                        builder.setIcon(android.R.drawable.ic_dialog_alert);
                        builder.setPositiveButton("Refresh", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                getLokasi();
                            }
                        });
                        AlertDialog alert = builder.create();
                        alert.show();
                    }

Jika kalian ingin menampilkan beberapa toolbar pada Maps, seperti toolbar untuk Zoom in atau Zoom out kalian dapat menambahkan code berikut :

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;

    mMap.getUiSettings().setMyLocationButtonEnabled(true);
    mMap.getUiSettings().setZoomControlsEnabled(true);
    mMap.getUiSettings().setCompassEnabled(true);
    mMap.getUiSettings().setMapToolbarEnabled(true);
}

3. Terakhir coba untuk running project dan buka menu Maps apakah berhasil menampilkan Marker Studio Musik, jika berhasil akan tampil marker seperti di bawah ini :

Kemudian jika tekan sekali pada marker akan memunculkan informasi nama Studio dan juga alamat studio musik tersebut:

Demikianlah tutorial bagian ini, dengan demikian kalian sudah dapat membuat aplikasi GIS. Untuk tutorial selanjutnya adalah menampilkan detail studio musik.