Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Menampilkan Peta Dengan Google Maps API Pada Android Studio

Ditulis oleh Nugroho Ardi Sutrisno, dipublikasi pada 01 Mar 2017 dalam kategori Tutorial
Menampilkan Peta Dengan Google Maps API Pada Android Studio - CodePolitan.com

Belakangan ini semakin banyak aplikasi android yang memberikan fitur berbasis lokasi, karena dengan fitur tersebut pengguna dapat memberikan informasi berupa lokasi yang ditampilkan dalam bentuk peta sehingga dapat dengan mudah dimengerti oleh penerima informasi. Maps API dari Google play service adalah salah satu API yang dapat dimanfaatkan dalam mengembangkan aplikasi android yang memberikan fitur berbasis lokasi.

Disini akan dijelaskan bagaimana cara menampilkan peta menggunakan Maps API di dalam aplikasi android yang nantinya akan dijalankan dalam perangkat android.

Persiapan

Beberapa hal yang perlu disiapkan antara lain :

  1. Android Studio.
  2. Perangkat android untuk uji coba aplikasi yang akan dibuat, pastikan perangkat terhubung dengan internet dan aktifkan akses lokasi.

Membuat Project Baru

  1. Buka Android Studio dan buat Project baru dangan nama "Peta", lalu klik next.
  2. Pilih versi SDK android minimal, disini dipilih Android 4.1, lalu klik next.
  3. Pada opsi "Add an Activity to mobile" pilih "Google maps activity", lalu klik next.
  4. Tinggalkan nama activity, lalu klik Finish.

Mendaftar Maps API

  1. Buka google_maps_api.xml pada package res/value, di google_maps_api.xml terdapat alamat untuk mengaktifkan Maps API, disini alamatnya adalah

    Copy alamat tersebut lalu buka dalam browser, bila perlu daftarkan akun gmail untuk konfigurasi API.
  2. Setelah halama google API terbuka, pilih "Tidak" untuk opsi dapatkan email, dan pilih "Ya" untuk opsi setuju dengan Syarat dan ketentuan, lalu klik setuju dan lanjutkan.
  3. Setelah halaman "API diaktifkan" terbuka, klik buat kunci API.
  4. Setelah terbuka halaman "Kredensial" lalu muncul kotak dialog "Kunci API Dibuat" copy kode API key yang ada didalam box "Kunci API Anda".
  5. Buka kembali google_maps_api.xml pada package res/value di Android Studio, lalu masukan kode API key diantara <string name="google_maps_key" templateMergeStrategy="preserve" translatable="false"> dan </string> menggantikan text YOUR_KEY_HERE, Hingga menjadi

Manifests dan build.gradle(Module:app)

Manifest

  1. Buka AndroidManifest.xml pada package manifests.
  2. Masukan Permission yang diperlukan antara lain ACCESS_NETWORK_STATE Untuk memeriksa apakah perangkat terhubung ke suatu jaringan atau tidak, INTERNET Untuk memeriksa apakah perangkat terhubung ke Internet atau tidak, ACCESS_COARSE_LOCATION Untuk memperkirakan lokasi pengguna menggunakan WiFi atau sinyal mobile, ACCESS_FINE_LOCATION Untuk memperkirakan lokasi terkini pengguna, OpenGL ES V2 Dibutuhkan untuk Google Maps V2
    sehingga AndroidManifest.xml menjadi :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.root.peta">

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <!--
         The ACCESS_COARSE/FINE_LOCATION permissions are not required to use
         Google Maps Android API v2, but you must specify either coarse or fine
         location permissions for the 'MyLocation' functionality.
    -->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <!--
             The API key for Google Maps-based APIs is defined as a string resource.
             (See the file "res/values/google_maps_api.xml").
             Note that the API key is linked to the encryption key used to sign the APK.
             You need a different API key for each encryption key, including the release key that is used to
             sign the APK for publishing.
             You can define the keys for the debug and release targets in src/debug/ and src/release/. 
        -->
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="@string/google_maps_key" />

        <activity
            android:name=".MapsActivity"
            android:label="@string/title_activity_maps">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

build.gradle(Module:app)

  1. Buka build.gradle(Module:app) pada Gradle Scripts
  2. Masukan compile com.google.android.gms:play-services:9.8.0 sebelum testCompile 'junit:junit:4.12
    Hingga menjadi

maps.java

  1. Buka MapsActivity.java pada package java, tidak perlu mengubah script tersebut namun pastikan MapsActivity.java terlihat seperti berikut
package com.example.root.peta;

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

Pada script diatas telah ditambahkan koordinat Sydney Australia secara default di onMapReady(). Jadi saat aplikasi dijalankan pertama kali marker akan ditempatkan di Sydney Australia.

Untuk uji coba aplikasi yang telah dibuat gunakan perangkat android yang terhubung ke android studio dan memiliki koneksi internet serta aktifkan akses lokasi pada pengaturan perangkat android. Jika uji coba berhasil maka akan muncul gambar seperti di bawah ini


background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP