Android Google Maps Menampilkan Marker Dari Database

Tutorial kali akan membahas tentang Google Maps, yaitu bagaimana cara menampilkan marker Google Maps Android yang datanya di ambil dari database. Pada project ini saya menggunakan membuat server menggunakna PHP dan MySQL. Agar data marker yang diambil dari database dapat di tampilkan di Google Maps android saya menggunakan library networking Retrofit.

Apa itu Marker Google Maps?

Marker adalah sebuah penanda tempat atau lokasi pada koordinat tertentu di Google Maps. Syarat utama menampilkan marker yaitu harus ada data latitude dan longitude tempat yang mau ditampilkan.

Contoh : Koordinat Kabupaten Badung, Bali adalah -8.58193 (latitude), 115.177059 (longitude). Kalian bisa cek koordinat suatu lokasi di situs distancesto.

Untuk mempersingkat penjelasan, saya akan langsung saja demokan bagaimana langkah-langkah menampilkan marker di Google Maps. Tutorial ini akan menggunakan 2 project, yaitu project di PhpStorm untuk membuat server (PHP & MySQL) dan project di android studio.

Pembuatan Server

Server yang saya buat sangat sederhana, hanya sebagai latihan saja (tidak direkomendasikan untuk production). Pertama-tama yang harus dilakukan adalah pembuatan database dan kedua adalah kodingan pada file PHP.

Database

Saya hanya menggunakan satu table saja, dan dalam tabel tersebut sudah saya insert data (silakan sesuaikan dengan database pada project kalian), lihat Gambar 1.

Gambar 1

Project PHP

Pada project PHP, terdapat 2 file yang akan saya gunakan untuk mengirim data ke android. Pertama class untuk mengkoneksikan project php ke database, kedua adalah class untuk menampilkan data dalam bentuk JSON.

Connection.php

Silakan sesuaikan username, password dan nama database yang kalian gunakan pada project kalian sendiri.

JsonDisplayMarker.php

Class diatas berfungsi untuk menampilkan data location yang disimpan di database dalam format json. Jika class ini dijalankan maka akan menghasilkan json seperti dibawah ini :

Project Android Studio

Saya akan membuat project ini langsung dari template yang telah disediakan oleh Android Studio, tidak dengan class kosong (biar cepat aja sih :D)

Buat project dari awal

Jika kalian belum bisa membuat project di android stuido, silakan ikuti tutorial berikut tentang cara membuat project di android studio.

Library Gradle

Saya menambahkan beberapa library, silakan sesuaikan gradle kalian seperti berikut ini :

Generated API_KEY

Agar bisa menampilkan Google Maps pada project kalian, silakan generated Google API_KEY di Google Developer Console, kalian bisa gunakan project yang sudah ada, atau membuat project baru.

Gambar 2

Pada Gambar 2, silakan buat buat API KEY dengan cara mengklik tombol GET A KEY. Setelah itu kalian akan dibawa ke tampilan dialog seperti Gambar 3

Gambar 4

Pada Gambar 4, silakan pilih project yang sudah ada, atau kalian juga bisa membuat project baru.

Gambar 5

Pada Gambar 5, Copy API_KEY yang sudah didapatkan . Setelah API_KEY sudah didapatkan, silakan tambahkan meta-data di android manifestnya. Tampilan meta-datanya seperti berikut :

AndroiManifest

Agar Google Maps mau tampil dengan sempurna di project kalian, maka sesuaikanlah AndroidManifest kalian seperti dibawah ini :

Setelah semua persiapan yang dibutuhkan telah di lakukan, sekarang saatnya proses kodingan di beberapa file Java nya. Jika kalian pernah melihat tutorial saya sebelumnya tentang bagaimana cara menampilkan data dari server (MySQL + PHP) menggunakan retrofit, maka kalian tidak akan asing dengan kodinga-kodingan dibawah ini

Buat 2 class sebagai model untuk menampung data json

LocationModel.java

Class ini digunakan untuk menampung satu object data yang didapat dari json. kodenya seperti dibawah ini (silakan sesuaikan dengan project kalian)

ListLocationModel.java

Karna data jsonnya berbentuk array, yang artinya lebih dari satu, maka satu object pada class LocationModel dibuatkan listnya dengan clas ListLocationModel. Kodenya seperti dibawah ini

Jika kalian kebingungan dengan maksud dari json array dan json object, silakan baca postingan saya tentang cara membuat file json dengan menggunakan php.

Class Client dan Interface

Berikut ini ada 2 class yang berfungsi untuk mendefinisikan URL utama (client) dan URL bagiannya (endpoint).

ApiClient.java

Jika diperhatikan URL nya terdapat angka-angka kan? Nah itu adalah IP dari komputer saya yang terhubung dengan internet local (bisa dari wifi atau thetering HP), fungsi agar saya bisa mengakses localhost dari HP.

ApiService.java

Class Logging Interceptor

Class ini berfungsi untuk menampilkan hasil (log) saat retrofit melakukan request data ke server. Sebenarnya class ini mau digunakan atau tidak, tidak masalah. Tapi jika digunakan kita akan lebih mudah untuk melakukan trace atau debugging jika suatu saat terjadi error pada proses request data.

Class MainActivity

Class ini adalah class utama yang digunakan untuk menampilkan semua data marker di Google Maps. Kode lengkapnya seperti dibawah ini :

Perhatikan :

Kenapa ada for didalam method getAllLocationLatLng() ?

Itu karena data yang mau ditampilkan sebagai marker di Google Maps ada banyak (lebih dari satu), sudah keharusan menggunakan sebuah proses looping atau perulangan.

Kenapa saat pertama kali aplikasi terbuka, kok seperti ada proses zoom ke salah satu marker?

Ya itu karena kode ini :

LatLng latLng = new LatLng(Double.parseDouble(mListMarker.get(0).getLatutide()), Double.parseDouble(mListMarker.get(0).getLongitude()));
mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(latLng.latitude,latLng.longitude), 11.0f)); 

Kalian bisa atur nilai 11.0f untuk mengatur besar zoomnya. Dan jika kalian ingin mengganti marker yang ingin di zoom, silakan ganti index 0 pada get(0).

Silakan download projectnya disini :

(Visited 1,033 times, 12 visits today)



Baca juga :


About The Author

Related Posts

11 Comments

  1. fza
    November 4, 2017
    • putuguna
      November 4, 2017
  2. arkage88
    November 18, 2017
    • putuguna
      November 21, 2017
  3. HANIL SADIKIN
    November 30, 2017
    • putuguna
      November 30, 2017
      • HANIL SADIKIN
        November 30, 2017
      • HANIL SADIKIN
        November 30, 2017
        • putuguna
          November 30, 2017
          • HANIL SADIKIN
            November 30, 2017
          • putuguna
            November 30, 2017

Add Comment

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini