Android 09.1 Lanjutan: Google Maps

1. Selamat Datang

Codelab ini adalah bagian dari kursus pelatihan Pengembangan Android Lanjutan, yang dikembangkan oleh tim Pelatihan Google Developers. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan.

Untuk mengetahui detail lengkap tentang kursus ini, lihat Ringkasan Pengembangan Android Lanjutan.

Catatan: Kursus ini menggunakan istilah "codelab" dan "praktis" secara bergantian.

Pengantar

Dengan membangun aplikasi menggunakan Google Maps, Anda dapat menambahkan fitur ke aplikasi seperti citra satelit, kontrol UI yang andal, pelacakan lokasi, dan penanda lokasi. Anda dapat menambahkan nilai ke Google Maps standar dengan menampilkan informasi dari set data Anda sendiri, seperti lokasi area memancing atau mendaki yang terkenal. Anda juga dapat membuat game yang terkait dengan dunia nyata, seperti Pokemon Go.

Dalam latihan ini, Anda akan membuat aplikasi Google Maps bernama Wander.

Yang harus sudah Anda ketahui

Anda harus memahami:

• Fungsi dasar Google Maps.
• Izin runtime.
• Membuat, membangun, dan menjalankan aplikasi di Android Studio.
• Menyertakan library eksternal dalam file build.gradle Anda.

Yang akan Anda pelajari

• Integrasikan Google Maps di aplikasi Anda.
• Menampilkan berbagai jenis peta.
• Menentukan gaya Google Map.
• Menambahkan penanda ke peta.
• Memungkinkan pengguna menempatkan penanda di lokasi menarik (POI).
• Aktifkan pelacakan lokasi.
• Aktifkan Google Street View.

Yang akan Anda lakukan

• Dapatkan kunci API dari Konsol API Google dan daftarkan kunci tersebut ke aplikasi Anda.
• Buat aplikasi Wander, yang memiliki Google Maps tersemat.
• Tambahkan fitur kustom ke aplikasi Anda seperti penanda, gaya, dan pelacakan lokasi.
• Aktifkan pelacakan lokasi dan Street View di aplikasi Anda.

2. Ringkasan aplikasi

Dalam latihan ini, Anda akan membuat aplikasi Wander, yang merupakan Google Maps yang diberi gaya. Aplikasi Wander memungkinkan Anda meletakkan penanda di lokasi, melihat lokasi Anda secara real time, dan melihat panorama Street View.

3. Tugas 1. Menyiapkan project dan mendapatkan Kunci API

Google Maps API, seperti Places API, memerlukan kunci API. Untuk mendapatkan kunci API, Anda mendaftarkan project di Konsol Google API. Kunci API terikat ke sertifikat digital yang menautkan aplikasi ke penulisnya. Untuk mengetahui informasi selengkapnya tentang penggunaan sertifikat digital dan penandatanganan aplikasi, lihat Menandatangani Aplikasi Anda.

Dalam latihan ini, Anda akan menggunakan kunci API untuk sertifikat debug. Sertifikat debug tidak aman berdasarkan desainnya, seperti yang dijelaskan dalam Menandatangani build debug Anda. Aplikasi Android yang dipublikasikan dan menggunakan Google Maps API memerlukan kunci API kedua: kunci untuk sertifikat rilis. Untuk informasi selengkapnya tentang cara mendapatkan sertifikat rilis, lihat Mendapatkan Kunci API.

Android Studio menyertakan template Aktivitas Google Maps, yang menghasilkan kode template yang berguna. Kode template mencakup file google_maps_api.xml yang berisi link yang menyederhanakan perolehan kunci API.

Catatan: Jika Anda ingin membuat Aktivitas tanpa menggunakan template, ikuti langkah-langkah dalam panduan kunci API untuk mendapatkan kunci API tanpa menggunakan link di template.

1.1 Membuat project Wander dengan template Maps

1. Buat project Android Studio baru.
2. Beri nama aplikasi baru "Wander". Terima nilai default hingga Anda mencapai halaman Tambahkan Aktivitas.
3. Pilih template Aktivitas Google Maps.
4. Biarkan Nama Aktivitas dan Nama Tata Letak default.
5. Ubah Judul menjadi "Wander", lalu klik Selesai.

Android Studio membuat beberapa file tambahan terkait peta:

google_maps_api**.xml**

Anda menggunakan file konfigurasi ini untuk menyimpan kunci API Anda. Template ini menghasilkan dua file google_maps_api.xml: satu untuk debug dan satu untuk rilis. File untuk kunci API untuk sertifikat debug terletak di src/debug/res/values. File untuk kunci API untuk sertifikat rilis terletak di src/release/res/values. Dalam latihan ini, kita hanya menggunakan sertifikat debug.

activity_maps.xml

File tata letak ini berisi satu fragmen yang mengisi seluruh layar. Class SupportMapFragment adalah subclass dari class Fragment. Anda dapat menyertakan SupportMapFragment dalam file tata letak menggunakan tag <fragment> di ViewGroup mana pun, dengan atribut tambahan:

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java

File MapsActivity.java membuat instance class SupportMapFragment dan menggunakan metode getMapAsync() class untuk menyiapkan Google Maps. Aktivitas yang berisi SupportMapFragment harus menerapkan antarmuka OnMapReadyCallback dan metode onMapReady() antarmuka tersebut. Metode getMapAsync() menampilkan objek GoogleMap, yang menandakan bahwa peta dimuat.

Jika Anda menjalankan aplikasi sekarang, peta gagal dimuat. Jika Anda melihat log, Anda akan melihat pesan yang menyatakan bahwa kunci API Anda tidak disiapkan dengan benar. Pada langkah berikutnya, Anda akan mendapatkan kunci API untuk membuat aplikasi menampilkan peta.

Catatan: Jika Anda menguji aplikasi Wander di emulator, gunakan image sistem yang menyertakan Google API dan Google Play. Pilih gambar yang menampilkan Google Play di kolom Target pada daftar perangkat virtual.

1.2 Mendapatkan kunci API

1. Buka file google_maps_api.xml versi debug.

File menyertakan komentar dengan URL panjang. Parameter URL mencakup informasi spesifik tentang aplikasi Anda.

2. Salin dan tempel URL ke browser.
3. Ikuti perintah untuk membuat project di Konsol Google API. Karena parameter di URL yang diberikan, Konsol API tahu cara mengaktifkan Google Maps Android API secara otomatis
4. Buat kunci API dan klik Batasi Kunci untuk membatasi penggunaan kunci hanya untuk aplikasi Android. Kunci API yang dibuat harus dimulai dengan AIza.
5. Di file google_maps_api.xml, tempelkan kunci ke dalam string google_maps_key di tempat yang bertuliskan YOUR_KEY_HERE.
6. Jalankan aplikasi Anda. Anda memiliki peta yang disematkan dalam aktivitas, dengan penanda yang ditetapkan di Sydney, Australia. (Penanda Sydney adalah bagian dari template, dan Anda dapat mengubahnya nanti.)

Catatan: Perlu waktu hingga 5 menit agar kunci API dapat diterapkan.

4. Tugas 2. Menambahkan jenis dan penanda peta

Google Maps menyertakan beberapa jenis peta: normal, hibrida, satelit, medan, dan "tidak ada". Dalam tugas ini, Anda akan menambahkan panel aplikasi dengan menu opsi yang memungkinkan pengguna mengubah jenis peta. Anda memindahkan lokasi awal peta ke lokasi rumah Anda sendiri. Kemudian, Anda menambahkan dukungan untuk penanda, yang menunjukkan satu lokasi di peta dan dapat menyertakan label.

2.1 Menambahkan jenis peta

Jenis peta yang diinginkan pengguna bergantung pada jenis informasi yang mereka butuhkan. Saat menggunakan peta untuk navigasi di mobil, Anda akan terbantu jika nama jalan terlihat jelas. Saat mendaki, Anda mungkin lebih peduli dengan seberapa jauh Anda harus mendaki untuk mencapai puncak gunung. Pada langkah ini, Anda akan menambahkan panel aplikasi dengan menu opsi yang memungkinkan pengguna mengubah jenis peta.

1. Untuk membuat file XML menu baru, klik kanan direktori res Anda, lalu pilih New > Android Resource File.
2. Dalam dialog, beri nama file map_options. Pilih Menu untuk jenis resource. Klik OK.
3. Ganti kode di file baru dengan kode berikut untuk membuat opsi peta. Jenis peta "none" tidak disertakan, karena "none" tidak akan menampilkan peta sama sekali.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never"/>
   <item android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never"/>
   <item android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never"/>
   <item android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never"/>
</menu>

4. Buat resource string untuk atribut title.
5. Di file MapsActivity, ubah class untuk memperluas class AppCompatActivity, bukan memperluas class FragmentActivity. Menggunakan AppCompatActivity akan menampilkan panel aplikasi, sehingga menu akan ditampilkan.
6. Di MapsActivity, ganti metode onCreateOptionsMenu() dan kembangkan file map_options:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}

7. Untuk mengubah jenis peta, gunakan metode setMapType() pada objek GoogleMap, dengan meneruskan salah satu konstanta jenis peta.

Ganti metode onOptionsItemSelected(). Tempel kode berikut untuk mengubah jenis peta saat pengguna memilih salah satu opsi menu:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       // Change the map type based on the user's selection.
       switch (item.getItemId()) {
           case R.id.normal_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
               return true;
           case R.id.hybrid_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
               return true;
           case R.id.satellite_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
               return true;
           case R.id.terrain_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
    }

8. Jalankan aplikasi. Gunakan menu di panel aplikasi untuk mengubah jenis peta. Perhatikan perubahan tampilan peta.

2.2 Memindahkan lokasi peta default

Secara default, callback onMapReady() menyertakan kode yang menempatkan penanda di Sydney, Australia, tempat Google Maps dibuat. Callback default juga menganimasikan peta untuk menggeser ke Sydney. Pada langkah ini, Anda membuat peta bergeser ke lokasi rumah Anda tanpa menempatkan penanda, lalu melakukan zoom ke tingkat yang Anda tentukan.

1. Dalam metode onMapReady(), hapus kode yang menempatkan penanda di Sydney dan memindahkan kamera.
2. Buka www.google.com/maps di browser Anda dan temukan rumah Anda.
3. Klik kanan lokasi, lalu pilih Ada apa di sini?

Di dekat bagian bawah layar, jendela kecil akan muncul dengan informasi lokasi, termasuk garis lintang dan bujur.

4. Buat objek LatLng baru bernama home. Di objek LatLng, gunakan koordinat yang Anda temukan dari Google Maps di browser.
5. Buat variabel float bernama zoom dan tetapkan variabel ke tingkat zoom awal yang Anda inginkan. Daftar berikut memberi Anda gambaran tentang tingkat detail yang ditampilkan setiap tingkat zoom:

• 1: Dunia
• 5: Daratan luas/benua
• 10: Kota
• 15: Jalan
• 20: Bangunan

6. Buat objek CameraUpdate menggunakan CameraUpdateFactory.newLatLngZoom(), dengan meneruskan objek LatLng dan variabel zoom. Geser dan zoom kamera dengan memanggil moveCamera() pada objek GoogleMap, lalu teruskan objek CameraUpdate baru:

mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));

7. Jalankan aplikasi. Peta akan bergeser ke rumah Anda dan diperbesar ke tingkat yang diinginkan.

2.3 Menambahkan penanda peta

Google Maps dapat menandai satu lokasi menggunakan penanda, yang Anda buat menggunakan class Marker. Penanda default menggunakan ikon Google Maps standar:

Anda dapat memperluas penanda untuk menampilkan informasi kontekstual di jendela info.

Pada langkah ini, Anda menambahkan penanda saat pengguna menyentuh dan menahan lokasi di peta. Kemudian, Anda menambahkan InfoWindow yang menampilkan koordinat penanda saat penanda diketuk.

1. Buat stub metode di MapsActivity yang disebut setMapLongClick() yang menggunakan GoogleMap final sebagai argumen dan menampilkan void:

private void setMapLongClick(final GoogleMap map) {}

2. Gunakan metode setOnMapLongClickListener() objek GoogleMap untuk menempatkan penanda di tempat pengguna menyentuh dan menahan. Teruskan instance baru OnMapLongClickListener yang menggantikan metode onMapLongClick(). Argumen yang masuk adalah objek LatLng yang berisi koordinat lokasi yang ditekan pengguna:

private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}

3. Di dalam onMapLongClick(), panggil metode addMarker(). Teruskan objek MarkerOptions baru dengan posisi yang ditetapkan ke LatLng yang diteruskan:

map.addMarker(new MarkerOptions().position(latLng));

4. Panggil setMapLongClick() di akhir metode onMapReady(). Teruskan mMap.
5. Jalankan aplikasi. Sentuh lama peta untuk menempatkan penanda di suatu lokasi.
6. Ketuk penanda, yang akan memusatkannya di layar.

Tombol navigasi muncul di sisi kiri bawah layar, sehingga pengguna dapat menggunakan aplikasi Google Maps untuk menavigasi ke posisi yang ditandai.

Untuk menambahkan jendela info untuk penanda:

1. Dalam objek MarkerOptions, tetapkan kolom title dan kolom snippet.
2. Di onMapLongClick(), tetapkan kolom title ke "Pin yang Dijatuhkan". Tetapkan kolom snippet ke koordinat lokasi di dalam metode addMarker().

map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
   @Override
   public void onMapLongClick(LatLng latLng) {
       String snippet = String.format(Locale.getDefault(),
               "Lat: %1$.5f, Long: %2$.5f",
               latLng.latitude,
               latLng.longitude);

       map.addMarker(new MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet));
   }
});

3. Jalankan aplikasi. Sentuh lama peta untuk memasang penanda lokasi. Ketuk penanda untuk menampilkan jendela info.

2.4 Menambahkan pemroses POI

Secara default, lokasi menarik (POI) muncul di peta bersama ikonnya. POI mencakup taman, sekolah, gedung pemerintahan, dan lainnya. Jika jenis peta disetel ke normal, POI bisnis juga akan muncul di peta. POI bisnis mewakili bisnis seperti toko, restoran, dan hotel.

Pada langkah ini, Anda akan menambahkan GoogleMap.OnPoiClickListener ke peta. Pemroses klik ini akan langsung menempatkan penanda di peta, bukan menunggu sentuh lama. Click-listener juga menampilkan jendela info yang berisi nama POI.

1. Buat stub metode di MapsActivity yang disebut setPoiClick() yang menggunakan GoogleMap final sebagai argumen, dan menampilkan void:

private void setPoiClick(final GoogleMap map) {}

2. Dalam metode setPoiClick(), tetapkan OnPoiClickListener pada GoogleMap yang diteruskan:

map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});

3. Dalam metode onPoiClick(), tempatkan penanda di lokasi POI. Tetapkan judul ke nama POI. Simpan hasilnya ke variabel bernama poiMarker.

public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}

4. Panggil showInfoWindow() di poiMarker untuk langsung menampilkan jendela info.

poiMarker.showInfoWindow();

5. Panggil setPoiClick() di akhir onMapReady(). Teruskan mMap.
6. Jalankan aplikasi Anda dan temukan POI seperti taman. Ketuk POI untuk menempatkan penanda di atasnya dan menampilkan nama POI di jendela info.

5. Tugas 3. Menentukan gaya peta Anda

Anda dapat menyesuaikan Google Maps dengan berbagai cara, sehingga peta Anda memiliki tampilan dan nuansa yang unik.

Anda dapat menyesuaikan objek MapFragment menggunakan atribut XML yang tersedia, seperti yang Anda lakukan saat menyesuaikan fragmen lainnya. Namun, pada langkah ini, Anda akan menyesuaikan tampilan dan nuansa konten MapFragment, menggunakan metode pada objek GoogleMap. Anda menggunakan Wizard Gaya online untuk menambahkan gaya ke peta dan menyesuaikan penanda. Anda juga dapat menambahkan GroundOverlay ke lokasi rumah Anda yang dapat diskalakan dan diputar bersama peta.

3.1 Menambahkan gaya ke peta

Untuk membuat gaya visual yang disesuaikan untuk peta, Anda membuat file JSON yang menentukan cara fitur dalam peta ditampilkan.Anda tidak perlu membuat file JSON ini secara manual: Google menyediakan Wizard Gaya Visual, yang membuat JSON untuk Anda setelah Anda menata gaya peta secara visual. Dalam latihan ini, Anda akan menata peta untuk "mode malam", yang berarti peta menggunakan warna redup dan kontras rendah untuk digunakan pada malam hari.

Catatan: Penataan gaya hanya berlaku untuk peta yang menggunakan jenis peta normal.

1. Buka https://mapstyle.withgoogle.com/ di browser Anda.
2. Pilih Buat Gaya.
3. Pilih tema Malam.
4. Klik Opsi Lainnya di bagian bawah menu.
5. Di bagian bawah daftar Feature type, pilih Water > Fill. Ubah warna air menjadi biru tua (misalnya, #160064).
6. Klik Selesai. Salin kode JSON dari jendela pop-up yang dihasilkan.
7. Di Android Studio, buat direktori resource bernama raw di direktori res. Buat file di res/raw bernama map_style.json.
8. Tempelkan kode JSON ke dalam file resource baru.
9. Untuk menetapkan gaya JSON ke peta, panggil setMapStyle() pada objek GoogleMap. Teruskan objek MapStyleOptions, yang memuat file JSON. Metode setMapStyle() menampilkan boolean yang menunjukkan keberhasilan penerapan gaya. Jika file tidak dapat dimuat, metode akan menampilkan Resources.NotFoundException.

Salin kode berikut ke dalam metode onMapReady() untuk menata gaya peta. Anda mungkin perlu membuat string TAG untuk pernyataan log:

     try {
        // Customize 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.map_style));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
     } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style. Error: ", e);
     }

10. Jalankan aplikasi Anda. Gaya visual baru akan terlihat saat peta berada dalam mode normal.

3.2 Memberi gaya pada penanda

Anda dapat mempersonalisasi peta lebih lanjut dengan mengatur gaya penanda peta. Pada langkah ini, Anda mengubah penanda merah default agar sesuai dengan skema warna mode malam.

1. Dalam metode onMapLongClick(), tambahkan baris kode berikut ke konstruktor MarkerOptions() untuk menggunakan penanda default, tetapi mengubah warnanya menjadi biru:

.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))

2. Jalankan aplikasi. Penanda yang Anda tempatkan kini berwarna biru, yang lebih konsisten dengan tema mode malam aplikasi.

Perhatikan bahwa penanda POI masih berwarna merah, karena Anda tidak menambahkan gaya ke metode onPoiClick().

3.3 Menambahkan overlay

Salah satu cara Anda dapat menyesuaikan Google Maps adalah dengan menggambar di atasnya. Teknik ini berguna jika Anda ingin menandai jenis lokasi tertentu, seperti tempat memancing yang populer. Tiga jenis overlay didukung:

• Bentuk: Anda dapat menambahkan polyline, poligon, dan lingkaran ke peta.
• Objek TileOverlay: Overlay ubin menentukan sekumpulan gambar yang ditambahkan di atas ubin peta dasar. Overlay petak peta berguna jika Anda ingin menambahkan gambar yang besar ke peta. Overlay ubin biasa mencakup area geografis yang luas.
• Objek GroundOverlay: Overlay bumi adalah gambar yang disematkan pada peta. Tidak seperti penanda, overlay bumi berorientasi pada permukaan Bumi, bukan pada layar. Memutar, memiringkan, atau melakukan zoom pada peta akan mengubah orientasi gambar. Overlay bumi berguna jika Anda ingin menetapkan satu gambar pada satu area di peta

Pada langkah ini, Anda akan menambahkan overlay tanah berbentuk Android ke lokasi rumah Anda.

1. Download image Android ini dan simpan di folder res/drawable Anda.
2. Di onMapReady(), setelah panggilan untuk memindahkan kamera ke posisi dasar, buat objek GroundOverlayOptions. Tetapkan objek ke variabel bernama homeOverlay:

GroundOverlayOptions homeOverlay = new GroundOverlayOptions();

3. Gunakan metode BitmapDescriptorFactory.fromResource() untuk membuat objek BitmapDescriptor dari gambar di atas. Teruskan objek ke metode image() objek GroundOverlayOptions:

GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));

4. Tetapkan properti position untuk objek GroundOverlayOptions dengan memanggil metode position(). Teruskan objek home LatLng dan float untuk lebar overlay yang diinginkan dalam meter. Untuk contoh ini, lebar 100 m berfungsi dengan baik:

GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);

5. Panggil addGroundOverlay() pada objek GoogleMap. Teruskan objek GroundOverlayOptions Anda:

mMap.addGroundOverlay(homeOverlay);

6. Jalankan aplikasi. Perbesar lokasi rumah Anda, dan Anda akan melihat gambar Android sebagai overlay.

6. Tugas 4. Mengaktifkan pelacakan lokasi dan Street View

Pengguna sering menggunakan Google Maps untuk melihat lokasi mereka saat ini, dan Anda dapat memperoleh lokasi perangkat menggunakan Location Services API. Untuk menampilkan lokasi perangkat di peta tanpa menggunakan data Location lebih lanjut, Anda dapat menggunakan lapisan data lokasi.

Lapisan data lokasi menambahkan tombol Lokasiku di sisi kanan atas peta. Saat pengguna mengetuk tombol, peta akan berpusat pada lokasi perangkat. Lokasi ditampilkan sebagai titik biru jika perangkat tidak bergerak, dan sebagai tanda V biru jika perangkat sedang bergerak.

Anda dapat memberikan informasi tambahan tentang lokasi menggunakan Google Street View, yang merupakan foto panorama lokasi tertentu yang dapat dijelajahi.

Dalam tugas ini, Anda akan mengaktifkan lapisan data lokasi dan Street View sehingga saat pengguna mengetuk jendela info untuk penanda POI, peta akan beralih ke mode Street View.

4.1 Mengaktifkan pelacakan lokasi

Mengaktifkan pelacakan lokasi di Google Maps hanya memerlukan satu baris kode. Namun, Anda harus memastikan bahwa pengguna telah memberikan izin lokasi (menggunakan model izin runtime).

Pada langkah ini, Anda meminta izin akses lokasi dan mengaktifkan pelacakan lokasi.

1. Di file AndroidManifest.xml, verifikasi bahwa izin FINE_LOCATION sudah ada. Android Studio menyisipkan izin ini saat Anda memilih template Google Maps.
2. Untuk mengaktifkan pelacakan lokasi di aplikasi Anda, buat metode di MapsActivity yang disebut enableMyLocation() yang tidak menggunakan argumen dan tidak menampilkan apa pun.
3. Tentukan metode enableMyLocation(). Periksa izin ACCESS_FINE_LOCATION. Jika izin diberikan, aktifkan lapisan lokasi. Jika tidak, minta izin:

private void enableMyLocation() {
   if (ContextCompat.checkSelfPermission(this,
           Manifest.permission.ACCESS_FINE_LOCATION)
           == PackageManager.PERMISSION_GRANTED) {
       mMap.setMyLocationEnabled(true);
   } else {
       ActivityCompat.requestPermissions(this, new String[]
                       {Manifest.permission.ACCESS_FINE_LOCATION},
               REQUEST_LOCATION_PERMISSION);
   }
}

4. Panggil enableMyLocation() dari callback onMapReady() untuk mengaktifkan lapisan lokasi.
5. Ganti metode onRequestPermissionsResult(). Jika izin diberikan, panggil enableMyLocation():

@Override
public void onRequestPermissionsResult(int requestCode,
       @NonNull String[] permissions,
       @NonNull int[] grantResults) {
   // Check if location permissions are granted and if so enable the
   // location data layer.
   switch (requestCode) {
       case REQUEST_LOCATION_PERMISSION:
           if (grantResults.length > 0
                   && grantResults[0]
                   == PackageManager.PERMISSION_GRANTED) {
               enableMyLocation();
               break;
           }
   }
}

6. Jalankan aplikasi. Sudut kanan atas kini berisi tombol Lokasiku, yang menampilkan lokasi perangkat saat ini.

Catatan: Saat Anda menjalankan aplikasi di emulator, lokasi mungkin tidak tersedia. Jika Anda belum menggunakan setelan emulator untuk menyetel lokasi, tombol lokasi tidak akan tersedia.

4.2 Mengaktifkan Street View

Google Maps menyediakan Street View, yang merupakan tampilan panorama suatu lokasi dengan kontrol untuk menavigasi di sepanjang jalur yang ditentukan. Street View tidak memiliki cakupan global.

Pada langkah ini, Anda mengaktifkan panorama Street View yang diaktifkan saat pengguna mengetuk jendela info POI. Anda perlu melakukan dua hal:

1. Membedakan penanda POI dari penanda lain, karena Anda ingin fungsi aplikasi Anda bekerja hanya pada penanda POI. Dengan cara ini, Anda dapat memulai Street View saat pengguna mengetuk jendela info POI, tetapi tidak saat pengguna mengetuk jenis penanda lainnya.

Class Marker menyertakan metode setTag() yang memungkinkan Anda melampirkan data. (Data dapat berupa apa pun yang diperluas dari Object). Anda akan menetapkan tag pada penanda yang dibuat saat pengguna mengklik POI.

2. Saat pengguna mengetuk jendela info yang diberi tag di OnInfoWindowClickListener, ganti MapFragment dengan StreetViewPanoramaFragment. (Kode di bawah menggunakan SupportMapFragment dan SupportStreetViewPanoramaFragment untuk mendukung versi Android di bawah API 12.)

Jika ada fragmen yang berubah saat runtime, Anda harus menambahkannya di class Activity yang memuat, dan bukan secara statis di XML.

Beri tag pada penanda POI

1. Di callback onPoiClick(), panggil setTag() pada poiMarker. Teruskan string arbitrer:

poiMarker.setTag("poi");

Mengganti SupportMapFragment statis dengan instance runtime

1. Buka activity_maps.xml dan ubah elemen menjadi tata letak frame yang akan berfungsi sebagai penampung untuk fragmen Anda:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

2. Di onCreate() dalam MapsActivity, hapus kode yang menemukan SupportMapFragment menurut ID, karena tidak ada lagi SupportMapFragment statis dalam XML. Sebagai gantinya, buat instance runtime baru dari SupportMapFragment dengan memanggil SupportMapFragment.newInstance():

SupportMapFragment mapFragment = SupportMapFragment.newInstance();

3. Tambahkan fragmen ke FrameLayout menggunakan transaksi fragmen dengan FragmentManager:

getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();

4. Pertahankan baris kode yang memicu pemuatan peta secara asinkron:

mapFragment.getMapAsync(this);

Menetapkan OnInfoWindowClickListener dan memeriksa tag penanda

1. Buat stub metode di MapsActivity yang disebut setInfoWindowClickToPanorama() yang menggunakan GoogleMap sebagai argumen dan menampilkan void:

private void setInfoWindowClickToPanorama(GoogleMap map) {}

2. Tetapkan OnInfoWindowClickListener ke GoogleMap:

map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });

3. Dalam metode onInfoWindowClick(), periksa apakah penanda berisi tag string yang Anda tetapkan dalam metode onPoiClick():

if (marker.getTag() == "poi") {}

Ganti SupportMapFragment dengan SupportStreetViewPanoramaFragment

1. Jika penanda berisi tag, tentukan lokasi untuk panorama Street View menggunakan objek StreetViewPanoramaOptions. Tetapkan properti position objek ke posisi penanda yang diteruskan:

StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());

2. Buat instance baru SupportStreetViewPanoramaFragment, dengan meneruskan objek options yang Anda buat:

SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);

3. Mulai transaksi fragmen. Ganti konten penampung fragmen dengan fragmen baru, streetViewFragment. Tambahkan transaksi ke data sebelumnya, sehingga menekan kembali akan menavigasi kembali ke SupportMapFragment dan tidak keluar dari aplikasi:

getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();

Catatan: Argumen untuk metode addToBackStack() adalah nama opsional. Nama ini digunakan untuk memanipulasi status data sebelumnya. Dalam hal ini, nama tidak digunakan lagi, sehingga Anda dapat meneruskan null.

4. Panggil setInfoWindowClickToPanorama(mMap) di onMapReady() setelah panggilan ke setPoiClick().
5. Jalankan aplikasi. Lakukan zoom ke kota yang memiliki cakupan Street View, seperti Mountain View (lokasi kantor pusat Google), lalu temukan POI, seperti taman. Ketuk POI untuk menempatkan penanda dan menampilkan jendela info. Ketuk jendela info untuk memasuki mode Street View untuk lokasi penanda. Tekan tombol kembali untuk kembali ke fragmen peta.

7. Kode solusi

Wander kode solusi.

8. Tantangan penyusunan kode

Catatan: Semua tantangan coding bersifat opsional.

Masalah: Jika Anda mengetuk jendela info untuk POI di lokasi yang tidak memiliki cakupan Street View, Anda akan melihat layar hitam.

• Untuk memeriksa apakah Street View tersedia di suatu area, terapkan callback OnStreetViewPanomaraReady bersama dengan StreetViewPanorama.OnStreetViewPanoramaChangeListener.
• Jika Street View tidak tersedia di area yang dipilih, kembali ke fragmen peta dan tampilkan error.

9. Ringkasan

• Untuk menggunakan Maps API, Anda memerlukan kunci API dari Konsol Google API.
• Di Android Studio, penggunaan template Google Maps Activity akan menghasilkan Activity dengan satu SupportMapFragment dalam tata letak aplikasi. Template ini juga menambahkan ACCESS_FINE_PERMISSION ke manifes aplikasi, menerapkan OnMapReadyCallback di aktivitas Anda, dan mengganti metode onMapReady() yang diperlukan.

Untuk mengubah jenis peta GoogleMap saat runtime, gunakan metode GoogleMap.setMapType(). Google Maps dapat berupa salah satu jenis peta berikut:

• Normal: Peta jalan umum. Menampilkan jalan, beberapa fitur yang dibuat manusia, dan fitur alami penting, seperti sungai. Label jalan dan fitur juga terlihat.
• Hybrid: Data foto satelit dengan tambahan peta jalan. Label jalan dan fitur juga terlihat.
• Satelit: Data foto. Label jalan dan fitur tidak terlihat.
• Medan: Data topografi. Peta ini menyertakan warna, garis kontur, dan label, serta bayangan perspektif. Beberapa jalan dan label juga terlihat.
• Tidak Ada**:** Tidak ada peta.

Tentang Google Maps:

• Penanda adalah indikator untuk lokasi geografis tertentu.
• Saat diketuk, perilaku default penanda adalah menampilkan jendela info dengan informasi tentang lokasi.
• Secara default, tempat menarik (POI) muncul pada peta dasar bersama ikonnya. POI mencakup taman, sekolah, gedung pemerintahan, dan lainnya.
• Selain itu, POI bisnis (toko, restoran, hotel, dan lainnya) muncul secara default di peta jika jenis peta adalah normal.
• Anda dapat merekam klik pada POI menggunakan OnPoiClickListener.
• Anda dapat mengubah tampilan visual hampir semua elemen Google Maps menggunakan Wizard Gaya Visual. Wizard Gaya Visual membuat file JSON yang Anda teruskan ke Google Map menggunakan metode setMapStyle().
• Anda dapat menyesuaikan penanda dengan mengubah warna default, atau mengganti ikon penanda default dengan gambar kustom.

Informasi penting lainnya:

• Gunakan overlay bumi untuk menyematkan gambar ke lokasi geografis.
• Gunakan objek GroundOverlayOptions untuk menentukan gambar, ukuran gambar dalam meter, dan posisi gambar. Teruskan objek ini ke metode GoogleMap.addGroundOverlay() untuk menyetel overlay ke peta.
• Jika aplikasi Anda memiliki izin ACCESS_FINE_LOCATION, Anda dapat mengaktifkan pelacakan lokasi menggunakan metode mMap.setMyLocationEnabled(true).
• Google Street View memberikan tampilan panorama 360 derajat dari jalan yang ditetapkan ke seluruh area cakupannya.
• Gunakan metode StreetViewPanoramaFragment.newInstance() untuk membuat fragmen Street View baru.
• Untuk menentukan opsi tampilan, gunakan objek StreetViewPanoramaOptions. Teruskan objek ke metode newInstance().

10. Pelajari lebih lanjut

Dokumentasi konsep terkait ada di 9.1: Google Maps API.

Dokumentasi developer Android:

• Mulai Menggunakan Google Maps Android API
• Menambahkan Peta dengan Penanda
• Objek Peta
• Menambahkan Peta Bergaya
• Street View
• Overlay Bumi

Dokumen referensi:

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

11. Tugas sekolah

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Instruktur menentukan hal berikut:

• Memberikan pekerjaan rumah jika diperlukan.
• Memberi tahu siswa cara mengirimkan tugas pekerjaan rumah.
• Memberi nilai tugas pekerjaan rumah.

Instruktur bisa menggunakan saran ini sesuai kebutuhan, dan bebas menugaskan pekerjaan rumah lain yang dirasa cocok.

Jika Anda menyelesaikan codelab ini sendiri, gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Membangun dan menjalankan aplikasi

1. Buat aplikasi baru yang menggunakan template Aktivitas Google Maps, yang memuat Google Maps saat aplikasi diluncurkan.
2. Saat Google Maps dimuat, pindahkan kamera ke lokasi sekolah, lokasi rumah, atau lokasi lain yang penting bagi Anda.
3. Tambahkan dua penanda ke peta, satu di lokasi sekolah Anda dan satu di rumah Anda atau lokasi penting lainnya.
4. Sesuaikan ikon penanda dengan mengubah warna default atau mengganti ikon penanda default dengan gambar kustom.

Petunjuk: Lihat dokumentasi onMapReady (GoogleMap googleMap).

Jawab pertanyaan-pertanyaan berikut

Pertanyaan 1

Metode mana yang dipanggil saat peta dimuat dan siap digunakan di aplikasi?

• onMapReady ( GoogleMap googleMap)
• onMapLoaded ( GoogleMap googleMap)
• onMapCreate ( GoogleMap googleMap)
• onMapInitialize ( GoogleMap googleMap)

Pertanyaan 2

Komponen Android mana yang dapat Anda gunakan untuk menyertakan Google Maps dalam aplikasi Anda?

• MapView dan MapFragment
• MapFragment dan MapActivity
• MapView dan MapActivity
• Hanya MapFragment

Pertanyaan 3

Jenis peta apa yang ditawarkan Google Maps Android API?

• Normal, hibrida, medan, satelit, dan peta jalan
• Normal, hibrida, medan, satelit, dan "tidak ada"
• Hibrida, medan, satelit, peta jalan, dan "tidak ada"
• Normal, medan, satelit, peta gambar, dan "none"

Pertanyaan 4

Antarmuka apa yang Anda terapkan untuk menambahkan fungsi klik pada lokasi menarik (POI)?

• GoogleMap.OnPoiListener
• GoogleMap.OnPoiClickListener
• GoogleMap.OnPoiClick
• GoogleMap.OnPoiClicked

Mengirimkan aplikasi Anda untuk dinilai

Panduan untuk penilai

Pastikan aplikasi memiliki beberapa fitur berikut:

• Saat aplikasi diluncurkan, Google Maps ditampilkan dengan benar, yang menunjukkan bahwa kunci API dibuat dengan benar.
• Setelah Google Maps dimuat, kamera akan berpindah ke lokasi rumah atau sekolah siswa. Dalam kode, langkah ini harus terjadi dalam metode callback onMapReady (GoogleMap googleMap).
• Penanda ditampilkan di lokasi sekolah siswa dan lokasi lain, seperti rumah siswa.
• Kedua penanda disesuaikan. Misalnya, penanda menggunakan warna selain warna merah default, atau menggunakan ikon kustom.

12. Codelab berikutnya

Untuk melihat semua codelab dalam kursus pelatihan Pengembangan Android Lanjutan, buka halaman landing codelab Pengembangan Android Lanjutan.