Tutorial Dasar Cara Membuat Aplikasi Google Map di Android Studio

Tutorial Dasar Cara Membuat Aplikasi Android untuk Menampilkan Google Map di Android Studio

Halo semuanya, kembali lagi bersama saya di Android Rion – Tutorial, Tutorial Lengkap Cara Membuat Aplikasi Android. Di artikel ini kita akan belajar Cara Membuat Aplikasi Android untuk Menampilkan Google Map di Android Studio.

Google Maps digunakan di banyak aplikasi untuk menampilkan lokasi dan menunjukkan lokasi tertentu di peta. Kita telah melihat penggunaan peta di berbagai macam aplikasi yang menyediakan layanan seperti GoJek, Grab, Uber dan banyak lagi. Jadi, di artikel ini kita akan belajar cara membuatnya.

Cara Membuat Aplikasi Android Untuk Menampilkan Map Menggunakan Google Maps di Android Studio

Buatlah projek Android Studio baru dengan informasi seperti pada tabel dibawah ini:

Application Name:Peta App
Package Name:com.androidrion.petaapp
Language:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

  1. MainActivity.java

Daftar library yang ditambahkan dalam projek ini:

  1. ‘com.google.android.gms:play-services-maps:17.0.1’

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Peta App.

Langkah 1: Menambahkan Library

Buka file buld.gradle (Module Peta_App:app) lalu tambahkan kode dibawah ini:

    implementation 'com.google.android.gms:play-services-maps:17.0.1'

Atau kalian bisa melakukan dengan cara dibawah ini.

Buka file activity_main.xml, ubah tampilan Android Studio dari Split menjadi Design seperti pada gambar dibawah ini.

Lalu pada bagian Palette, pilih Google>MapView. Klik logo download.

Jika muncul jendela seperti pada gambar dibawah ini. Klik ok.

Projek akan secara otomatis melakukan sinkronisasi.

Langkah 2: Membuat layout (activity_main.xml)

Pada file activity_main.xml, Jika tampilannya Design maka ubah menjadi Split. Dibawah ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity" />

Langkah 3: Menambahkan kode (MainActivity.java)

Buka file MainActivity.java dalam folder java. Ubah Activity menjadi FragmentActivity dan tambahkan implementasi OnMapReadyCallback. Jika sudah, maka akan muncul Override OnMapReady. Dibawah ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.petaapp/MainActivity.java

package com.androidrion.petaapp;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.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 MainActivity extends FragmentActivity implements OnMapReadyCallback {

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

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        assert mapFragment != null;
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        LatLng google = new LatLng(-6.227487391896707, 106.80857070594166);
        googleMap.addMarker(new MarkerOptions().position(google).title("Kantor Google Indonesia"));
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(google));
    }
}

Langkah 4: Menambahkan Metadata dan Permission (AndroidManifest.xml)

Buka file AndroidManifest.xml dalam folder app>manifests. Tambahkan permission untuk ACCESS_FINE_LOCATION dan ACCESS_COARSE_LOCATION.


    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Lalu tambahkan metadata dalam file AndroidManifest.xml di dalam application.

<meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="GOOGLE_MAPS_API_KEY" />

Pada value di meta-data GOOGLE_MAPS_API_KEY, ganti dengan API KEY yang kalian miliki, untuk mendapatkan API KEY kalian masing-masing. Kalian bisa mempelajarinya pada artikel dibawah ini.

Jika kalian sudah mendapatkannya, maka file AndroidManifest.xml seperti pada kode dibawah ini.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidrion.petaapp">

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.PetaApp">

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyDnjlSEd8d0eC1wX-OPVRLQUWn_aIB8vOQ" />


        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Langkah 5: Jalankan projek

Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi Tutorial Dasar Cara Membuat Aplikasi Android Untuk Menampilkan Google Maps di Android Studio. Tutorial diatas mungkin sedikit membingungkan dibagian saat mendapatkan API KEY nya. Terlebih lagi untuk kalian yang baru pertama kali menggunakan Google Cloud Platform. Sebaiknya kalian pelajari terlebih dahulu mengugnakan GCP.

Download Projek

Klik tombol dibawah ini untuk mendapatkan projek pada artikel ini

Exit mobile version