Tutorial Menampilkan Maps di Android Menggunakan Android Studio

Hi all, sudah lama saya tidak membahas tentang GIS dan pemetaan di Android. Oke, sekarang kita semua pasti sudah mengenal Android Studio dan sudah pernah menggunakannnya untuk membuat aplikasi Android. Namun tahukah kalian jika kita bisa membuat aplikasi berbasis pemetaan / map-based application menggunakan Android Studio dengan sangat mudah? Bahkan lebih mudah dibandingkan saat kita membuat aplikasi pemetaan di Android di Eclipse menggunakan Map Fragment.

Membuat Aplikasi Peta di Android Menggunakan Android Studio

Okay, di tutorial ini kita akan belajar membuat aplikasi pemetaan menggunakan Android Studio. Pertama-tama, bukalah Android Studio dan dari menu bar di bagian atas, pilih > File > New > New Project, lalu pilih template untuk Google Maps Activity, seperti contoh di bawah.

Memilih template untuk Google Maps Activity pada Android Studio

Memilih template untuk Google Maps Activity pada Android Studio

Jika sudah, click > Next dan sebuah halaman baru akan terbuka dimana kalian bisa memberikan nama untuk Maps Activity, layout name, dan activity title yang kalian buat (untuk tutorial ini kita akan menggunakan nama default). Kemudian di halaman berikutnya kalian bisa mengisi nama aplikasi kalian dan juga nama package nya. Jika sudah selesai, kalian bisa klik Finish dan secara otomatis akan dibawa ke halaman project kalian di Android Studio.

Memberikan nama pada Android Maps Activity

Memberikan nama pada Android Maps Activity

Pada tutorial ini, kita akan menggunakan Google Maps API key yang sudah kita buat di tutorial sebelumnya untuk aplikasi yang kita buat. Untuk memasukkan API key tersebut, buka google_maps_api.xml pada folder /res/values. Replace string YOUR_KEY_HERE dengan API key yang sudah kalian dapatkan, seperti contoh di bawah ini :

<resources>  
<string name="google_maps_key" templateMergeStrategy="preserve" translatable="false">AIza************0c</string>
</resources>

Setelah itu, mari kita buka file MapsActivity.java dimana semua logic pemetaan pada aplikasi kita tersimpan di file tersebut. Contoh kodenya seperti di bawah:

package id.web.twoh.mymapapp;

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

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);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }


    /**
     * Manipulates the map once available.
     * This callback is triggered when the map is ready to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user will be prompted to install
     * it inside the SupportMapFragment. This method will only be triggered once the user has
     * installed Google Play services and returned to the app.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney 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));
    }
}

 

Kode tersebut cukup sederhana, tapi mari kita review bersama-sama. Pada kodingan tersebut pertama-tama aplikasi akan membuat sebuah instance dari GoogleMap, yang merupakan sebuat map object di aplikasi kita. Setelah itu, aplikasi akan membuat sebuah Marker baru untuk diletakkan di atas peta. Lokasi Marker tersebut diletakkan akan mengacu pada variable LatLng, yang berisi koordinat latitude dan longitude (-34, 151). Yang terakhir, method moveCamera() akan dipanggil sehingga ketika kita membuka aplikasi pertama kali, kita akan dibawa ke titik sesuai dengan koordinat yang sudah diberikan, yaitu dalam contoh ini adalah ke Sydney.

Mungkin kalian akan bertanya, “Bagaimana jika saya ingin supaya peta nya menunjuk ke lokasi saya?” Jangan khawatir, Google Maps sudah mempunyai sebuah method untuk menghandle hal tersebut, caranya kita tinggal memodifikasi kodingannya sedikit, dan menambahkan baris berikut :

mMap.setMyLocationEnabled(true);

Tepat di bawah method moveCamera(). Method itu akan membuat peta menampilkan sebuat tombol “my location” kecil di bagian kanan atas peta pada layar. Kemudian apabila kita mengklik tombol tersebut, peta secara otomatis akan bergerak ke lokasi kita berada. Namun ingat untuk menggunakan fitur ini kalian harus mengaktifkan Location Services pada perangkat Android kalian.

Demo

Sekarang mari kita coba jalankan aplikasi kita! Ketika dijalankan maka akan muncul sebuah peta keren seperti gambar di bawah, mudah bukan ?

Android Maps yang dibuat menggunakan Android Studio

Android Maps yang dibuat menggunakan Android Studio

Thats all, sample source code bisa didownload di GitHub saya. Kalian juga bisa membaca artikel ini dalam bahasa Inggris pada Intel Android Hub. Silahkan bertanya di bagian komentar apabila ada yang kurang jelas. 🙂

 



Download aplikasi kami di Google Play Store


6 Comments

  1. Kanissa July 9, 2016
    • Hafizh Herdi October 16, 2016
  2. Denny Mahadira October 29, 2016
  3. William November 25, 2016
    • Hafizh Herdi January 14, 2017

Leave a Reply