[Tutorial Lanjutan] Cara Menampilkan Tipe Peta Pada Google Map di Android Studio

Tutorial Cara Menampilkan Tipe Peta Pada Google Map di Android Studio

Halo semuanya, melanjutkan tutorial tentang Google Map. Sebelumnya saya sudah pernah membagikan tutorial dasar cara membuat aplikasi android untuk menampilkan peta menggunakan google map di android studio dan juga tutorial cara membuat multi marker pada google maps. Jadi, pada artikel ini saya akan membagikan tutorial cara menampilkan tipe peta pada google map di android studio.

Saat kita menggunakan aplikasi default atau bawaan Google Maps, kita akan melihat berbagai jenis peta yang ada di dalam aplikasi tersebut. Kita bisa melihat tipe peta satelit, tipe peta medan, tipe peta normal dan banyak lagi. Sebelumnya kita telah belajar cara menambahkan Google Maps di aplikasi android. Jadi pada artikel ini, kita akan melihat penerapan berbagai jenis tipe peta dari Google Maps di aplikasi Android.

Tutorial Cara Menampilkan Tipe Peta Google Map di Android Studio

Sesuai dari judul artikel ini, jadi pada tutorial ini kita perlu membuat projek baru. Cukup menggunakan pada projek sebelumnya. Kalian bisa mempelajarinya pada link dibawah ini.

Daftar file xml layout yang diperbarui pada projek ini:

  1. activity_main.xml (Tutorial Sebelumnya + Perbarui)

Daftar file java activity yang diperbarui pada projek ini:

  1. MainActivity.java (Tutorial Sebelumnya + Perbarui)

Dibawah ini adalah langkah-langkah cara membuat aplikasi Peta App.

Langkah 1: Ubah tampilan layout (activity_main.xml)

Buka file activity_main.xml dalam folder layout, lalu ubah tampilan layout dengan menggunakan RelativeLayout. Tambahkan fragment untuk kita gunakan sebagai maps dan juga tiga button. Dibawah ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="horizontal"
        android:padding="16dp">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_normal_map"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Normal\nMap" />

        <View
            android:layout_width="8dp"
            android:layout_height="match_parent" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_satellite_map"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Satellite\nMap" />

        <View
            android:layout_width="8dp"
            android:layout_height="match_parent" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_terrain_map"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Terrain\nMap" />
    </LinearLayout>
</RelativeLayout>

Langkah 2: Tambahkan kode pada file MainActivity.java

Buka file MainActivity.java dalam folder java. Deklarasikan GoogleMap menjadi google_map dan Button menjadi masing-masing dari sifat tombol tersebut. Selanjutnya pada onMapReady gunakan google_map yang telah kita deklarasikan. Dibawah ini adalah kode lengkap untuk file MainActivity.java

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

package com.androidrion.petaapp;

import android.os.Bundle;
import android.widget.Button;

import androidx.annotation.NonNull;
import androidx.fragment.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;

import java.util.ArrayList;

public class MainActivity extends FragmentActivity implements OnMapReadyCallback {

    GoogleMap google_map;
    LatLng jakarta = new LatLng(-6.208581138982257, 106.84565194581037);
    LatLng bogor = new LatLng(-6.596957193573075, 106.81093423241501);
    LatLng depok = new LatLng(-6.402545709255815, 106.79685381428982);
    LatLng tangerang = new LatLng(-6.170353137237634, 106.64755473289595);
    LatLng bekasi = new LatLng(-6.237020446528839, 106.97407286851467);

    ArrayList<LatLng> daftarLokasi;

    Button btnNormalMap, btnTerrainMap, btnSatelliteMap;

    @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);

        daftarLokasi = new ArrayList<>();
        daftarLokasi.add(jakarta);
        daftarLokasi.add(bogor);
        daftarLokasi.add(depok);
        daftarLokasi.add(tangerang);
        daftarLokasi.add(bekasi);

        btnNormalMap = findViewById(R.id.btn_normal_map);
        btnNormalMap.setOnClickListener(view -> google_map.setMapType(GoogleMap.MAP_TYPE_NORMAL));

        btnSatelliteMap = findViewById(R.id.btn_satellite_map);
        btnSatelliteMap.setOnClickListener(view -> google_map.setMapType(GoogleMap.MAP_TYPE_SATELLITE));

        btnTerrainMap = findViewById(R.id.btn_terrain_map);
        btnTerrainMap.setOnClickListener(view -> google_map.setMapType(GoogleMap.MAP_TYPE_TERRAIN));
    }

    @Override
    public void onMapReady(@NonNull GoogleMap googleMap) {
        google_map = googleMap;
        for (int i = 0; i < daftarLokasi.size(); i++) {
            google_map.addMarker(new MarkerOptions().position(daftarLokasi.get(i)).title("Lokasi"));
            google_map.animateCamera(CameraUpdateFactory.zoomTo(10));
            google_map.moveCamera(CameraUpdateFactory.newLatLng(daftarLokasi.get(i)));
        }
    }

}

Langkah 3: Jalankan projek

Setelah kalian membuat layout dan menambahkan kode diatas, maka selanjutnya kalian bisa menjalankan kode tersebut. Ketika aplikasi berjalan, kalian bisa melihat adanya tiga tombol yang berada diatas aplikasi. Jika kalian klik tombol SATELITE MAP, maka peta yang muncul pada aplikasi tersebut akan menganti tipe. Sama halnya dengan dua tombol lainnya. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada video dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Menampilkan Tipe Peta Pada Google Maps di Android Studio. Tutorial diatas sangatlah mudah untuk dikerjakan. Kita tidak perlu banyak menggunakan kode hanya untuk membuat peta yang muncul berganti. Dan juga pada layout tidak perlu banyak menggunakan kode xml.

Jika kalian mengalam kendala saat melakukan tutorial diatas, silahkan berkomentar dibawah pada artikel ini. Dan jangan lupa juga untuk Subscribe Chanel YouTube Android Rion – Tutorial agar kalian bisa mendapatkan tutorial versi videonya. Semoga tutorial ini bisa membantu kalian. Terima kasih. 🙂

Download Projek

Klik tombol dibawah ini untuk mendapatkan projek pada artikel ini

Exit mobile version