Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps Android API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps Android API
  3. Buat kunci yang sesuai
Lanjutkan

Menambahkan Peta Bergaya

Tutorial ini menunjukkan kepada Anda cara menambahkan peta dengan penataan gaya khusus untuk aplikasi Android. Tutorial menggunakan mode malam sebagai contoh penataan gaya khusus.

Dengan opsi gaya, Anda bisa menyesuaikan presentasi gaya peta Google standar, mengubah tampilan visual dari fitur seperti jalan raya, taman, bisnis, dan tempat menarik lainnya. Ini berarti Anda bisa menekankan komponen tertentu dari peta atau membuat peta melengkapi gaya aplikasi Anda.

Penataan gaya hanya berfungsi pada tipe peta normal.

Mendapatkan kode

Klon atau unduh repositori Google Maps Android API v2 Samples dari GitHub.

Mempersiapkan proyek development Anda

Ikuti langkah-langkah ini untuk membuat proyek tutorial di Android Studio.

  1. Unduh dan pasang Android Studio.
  2. Tambahkan paket Google Play Services ke Android Studio.
  3. Klon atau unduh repositori Google Maps Android API v2 Samples jika Anda tidak melakukannya saat mulai membaca tutorial ini.
  4. Impor proyek tutorial:

    • Di Android Studio, pilih File > New > Import Project.
    • Masuklah ke lokasi Anda menyimpan repositori Google Maps Android API v2 Samples setelah mengunduhnya.
    • Temukan proyek StyledMap di lokasi ini:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Pilih direktori proyek, kemudian klik OK. Android Studio sekarang membangun proyek Anda, menggunakan alat (bantu) pembangunan Gradle.

Mendapatkan kunci API dan mengaktifkan API yang diperlukan

Untuk menyelesaikan tutorial ini, Anda membutuhkan kunci Google API yang telah diotorisasi untuk menggunakan Google Maps Android API.

Klik tombol di bawah ini untuk mendapatkan kunci dan mengaktifkan API.

Get a Key

Untuk detail selengkapnya, lihat panduan lengkap untuk mendapatkan kunci API.

Menambahkan kunci API ke aplikasi Anda

  1. Edit file gradle.properties proyek Anda.
  2. Tempelkan kunci API Anda ke dalam nilai properti GOOGLE_MAPS_API_KEY. Bila Anda membangun aplikasi, Gradle akan menyalin kunci API ke dalam manifes Android aplikasi Anda.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Membangun dan menjalankan aplikasi Anda

  1. Hubungkan perangkat Android ke komputer Anda. Ikuti petunjuk untuk mengaktifkan opsi developer pada perangkat Android Anda serta mengonfigurasi aplikasi dan sistem Anda untuk mendeteksi perangkat. (Atau, Anda bisa menggunakan Android Virtual Device (AVD) Manager untuk mengonfigurasi perangkat virtual. Saat memilih emulator, pastikan Anda mengambil gambar yang menyertakan Google API. Untuk detail selengkapnya, lihat panduan memulai.)
  2. Di Android Studio, klik opsi menu Run (atau ikon tombol play). Pilih perangkat saat diminta.

Android Studio akan memanggil Gradle untuk membangun aplikasi, dan kemudian menjalankan aplikasi pada perangkat atau pada emulator. Anda harus melihat peta dengan penataan gaya gelap (mode malam), sama dengan gambar pada laman ini.

Pemecahan masalah:

Memahami kode

Bagian tutorial ini menjelaskan bagian paling signifikan dari aplikasi StyledMap, untuk membantu Anda memahami cara membangun aplikasi serupa.

Menambahkan sumber daya yang memuat objek gaya JSON

Menambahkan sumber daya untuk proyek development Anda, yang berisi deklarasi gaya dalam format JSON. Anda bisa menggunakan sumber daya mentah atau string, seperti yang ditunjukkan pada contoh di bawah ini.

Catatan: Aplikasi contoh yang Anda unduh dari GitHub menggunakan sumber daya mentah.

Sumber daya mentah

Mendefinisikan sumber daya mentah di /res/raw/style_json.json, yang berisi deklarasi gaya JSON untuk penataan gaya mode-malam:

Sumber daya string

Mendefinisikan sumber daya string di /res/values/style_strings.xml, yang berisi deklarasi gaya JSON untuk penataan gaya mode-malam: Tutorial ini menggunakan nama string style_json. Di file ini Anda harus menggunakan garis miring terbalik untuk melepaskan tanda petik:

Meneruskan objek gaya JSON ke peta Anda

Untuk menata gaya peta Anda, panggil GoogleMap.setMapStyle() yang meneruskan objek MapStyleOptions yang berisi deklarasi gaya dalam format JSON.

Sumber daya mentah

Contoh kode berikut mengasumsikan proyek Anda berisi sumber daya mentah bernama style_json:

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

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.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Layout (activity_maps_raw.xml) terlihat seperti ini:

Sumber daya string

Contoh kode berikut mengasumsikan proyek Anda berisi sumber daya string bernama style_json:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

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.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Layout (activity_maps_string.xml) terlihat seperti ini:

Lebih banyak tentang deklarasi gaya JSON

Peta bergaya menggunakan dua konsep untuk menerapkan warna dan perubahan gaya lain pada peta:

  • Pemilih menentukan komponen geografis yang bisa Anda tata gayanya pada peta. Ini termasuk jalan, taman, badan air, dan lainnya, juga labelnya. Pemilih meliputi fitur dan elemen yang ditetapkan sebagai properti featureType dan elementType.
  • Styler adalah properti warna dan visibilitas yang bisa Anda terapkan pada elemen peta. Semua ini menentukan warna yang ditampilkan melalui kombinasi nilai hue, color, dan lightness/gamma.

Lihat referensi gaya untuk keterangan detail tentang opsi penataan gaya JSON.

Google Maps APIs Styling Wizard

Gunakan Google Maps APIs Styling Wizard sebagai cara cepat untuk menghasilkan objek penataan gaya JSON. Google Maps Android API Mendukung deklarasi gaya yang sama seperti Google Maps JavaScript API.

Langkah berikutnya

Lihat cara menyembunyikan fitur pada peta dengan penataan gaya.

Kirim masukan tentang...

Google Maps Android API
Google Maps Android API
Butuh bantuan? Kunjungi halaman dukungan kami.