Menggunakan ID Peta

ID peta adalah ID unik yang digunakan untuk mewakili satu instance Google Maps. Anda menggunakan ID peta untuk mengaktifkan fitur atau mengelola atau menata gaya peta di situs dan aplikasi Anda. Anda dapat membuat ID peta untuk setiap platform yang diperlukan--JavaScript, Android, iOS, atau peta Statis--di project Google Cloud Console pada halaman Pengelolaan Peta.

Yang dapat Anda lakukan dengan ID peta

Gunakan ID peta untuk mengaktifkan fitur dan gaya visual. Berikut beberapa contoh cara menggunakan ID peta. Untuk daftar lengkap, lihat Fitur yang menggunakan ID peta:

  • Gaya visual peta berbasis cloud: Kaitkan ID peta dengan gaya peta untuk menata gaya, menyesuaikan, dan mengelola peta menggunakan Google Cloud Console. Tersedia di semua platform: JavaScript, Android, iOS, dan Maps Static API.

  • Peta vektor: Gunakan ID peta untuk menggunakan peta yang terdiri dari ubin berbasis vektor yang digambar pada waktu pemuatan di sisi klien menggunakan WebGL. Tersedia di JavaScript.

  • Penanda lanjutan: Gunakan ID peta untuk mengaktifkan Penanda lanjutan. Tersedia di JavaScript, Android, dan iOS.

Contoh untuk gaya visual peta berbasis cloud

Untuk menggunakan gaya visual peta berbasis cloud guna menata gaya peta di situs dan aplikasi Android, Anda harus mengikuti langkah-langkah berikut:

  1. Buat ID peta untuk setiap platform yang Anda gunakan. Misalnya, buat JavaScript dan ID peta Android. Untuk mengetahui detailnya, lihat bagian Membuat ID peta.

  2. Konfigurasikan gaya peta di Konsol Google Cloud. Untuk mengetahui detailnya, lihat bagian gaya visual peta berbasis cloud.

  3. Kaitkan kedua ID peta Anda dengan gaya peta di Google Cloud Console. Untuk mengetahui detailnya, lihat Mengaitkan ID peta dengan gaya Anda.

  4. Mereferensikan ID peta di JavaScript situs dan kode aplikasi Android Anda. Untuk mengetahui detailnya, lihat Menambahkan ID peta ke aplikasi Anda.

Gaya peta yang terkait dengan ID peta Anda kemudian akan ditampilkan di situs dan di aplikasi Android Anda. Anda dapat memperbarui gaya peta di Konsol Cloud, dan perubahan akan otomatis muncul di kedua tempat tersebut, tanpa perlu update aplikasi dari pelanggan.

Fitur yang menggunakan ID peta

Tabel berikut menunjukkan fitur dan API Google Maps Platform yang menggunakan ID peta:

Fitur atau API Menggunakan ID peta untuk mencapai sasaran ini
Penanda lanjutan Aktifkan penanda lanjutan. Anda tidak perlu membuat ID peta, dan dapat menggunakan ID peta demo `DEMO_MAP_ID`.
Gaya visual berbasis data untuk batas Kaitkan ID peta dengan serangkaian batas dan gaya visual untuk menata gaya peta sesuai dengan batas.
Gaya visual berbasis data untuk set data Kaitkan ID peta dengan kumpulan data dan gaya visual untuk menata gaya peta sesuai dengan set data.
Flutter Buat gaya peta Google yang digunakan di aplikasi Flutter Anda.
Maps Embed API Tentukan dan sesuaikan gaya peta yang akan disematkan di halaman web.
Maps JavaScript API Buat gaya peta yang akan ditampilkan di halaman web.
Maps SDK for Android Buat gaya peta yang akan ditampilkan di aplikasi Android.1
Maps SDK for iOS Buat gaya peta yang akan ditampilkan di aplikasi iOS.1
Maps Static API Tentukan dan sesuaikan gaya peta yang akan dirender sebagai gambar statis.
Solusi mobilitas Gunakan Maps JavaScript API dan SDK untuk Android dan iOS guna menata gaya peta dalam solusi Mobilitas.1
WebGL (Peta vektor) Aktifkan fitur WebGL menggunakan ID peta Vektor JavaScript.

1 Penggunaan ID peta di Maps SDK for Android atau Maps SDK for iOS akan memicu pemuatan peta yang ditagih berdasarkan SKU Dynamic Maps.

Cara membuat dan menggunakan ID peta

ID peta adalah ID unik yang mewakili satu instance Google Maps. Anda membuat ID peta dan memperbarui gaya peta yang terkait dengan ID peta di Cloud Console.

Izin yang diperlukan

Untuk membuat atau mengelola ID peta di project, Anda harus menggunakan akun utama dengan izin tingkat peran yang sesuai, Editor atau Pemilik, di halaman IAM Cloud Console untuk project tersebut. Untuk mengetahui detailnya, lihat Referensi peran dasar dan bawaan IAM.

Membuat ID peta

Anda dapat membuat ID peta dan memperbarui gaya yang dikaitkan dengan ID peta kapan saja di Cloud Console.

Untuk membuat ID peta, ikuti langkah-langkah berikut:

  1. Login ke dan buka project Cloud Console dengan izin yang diperlukan.

  2. Di Cloud Console, buka halaman Pengelolaan Peta.

  3. Pilih Buat ID peta.

    Buat ID Peta Baru

  4. Di halaman Create new map ID, lakukan hal berikut:

    1. Untuk Name, beri nama ID peta.
    2. Opsional: Untuk Deskripsi, jelaskan kegunaan ID peta.
    3. Untuk Map type, pilih platform tempat Anda berencana menggunakan ID peta. Jika Anda memilih JavaScript, pilih juga jenis peta Raster (default) atau Vector. Untuk informasi selengkapnya tentang Peta vektor, lihat Peta Vektor.
    4. Pilih Simpan untuk menampilkan ID peta baru Anda.

Mengaitkan ID peta ke gaya peta

Petunjuk ini mengasumsikan bahwa setidaknya ada satu gaya peta yang sudah ada dalam project Anda. Jika Anda tidak memiliki gaya peta, lihat artikel Gaya visual peta berbasis cloud dan pilih platform Anda untuk mendapatkan petunjuk cara membuatnya.

  1. Di Cloud Console, buka halaman Pengelolaan Peta.
  2. Dari tabel, pilih ID peta yang sudah ada.
  3. Di bagian Associated map style, pilih gaya peta.

  4. Pilih Simpan.

    Halaman detail untuk ID peta, tempat Anda mengaitkan gaya peta

Menambahkan ID peta ke aplikasi Anda

Android

Tambahkan ID peta melalui elemen <fragment> dalam file tata letak aktivitas, dengan menggunakan class MapView, atau secara terprogram menggunakan class GoogleMapOptions.

Misalnya, Anda membuat ID peta yang disimpan sebagai nilai string dengan nama map_id di res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Untuk peta yang ditambahkan melalui elemen <fragment> dalam file tata letak aktivitas, semua fragmen peta yang perlu memiliki gaya kustom harus menentukan ID peta di atribut map:mapId:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

Anda juga dapat menggunakan atribut map:mapId dari class MapView untuk menentukan ID peta:

<com.google.android.gms.maps.MapView
    xmlns:android="http://schemas.android.com/apk/res/android"
    ....
    map:mapId="@string/map_id" />

Untuk menentukan ID peta secara terprogram, teruskan ke instance MapFragment menggunakan class GoogleMapOptions:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

Di Android Studio, build dan jalankan aplikasi seperti biasanya. Gaya kustom yang dikonfigurasi pada langkah pertama diterapkan ke semua peta dengan ID peta yang ditentukan.

iOS

Untuk membuat instance peta menggunakan ID peta, lakukan hal berikut:

  1. Buat GMSMapID dengan string ID peta dari Cloud Console.
  2. Buat GMSMapView yang menentukan ID peta yang baru saja Anda buat.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Jika menggunakan ID peta Anda sendiri, Anda dapat menetapkan ID peta di Konsol Cloud untuk memiliki gaya baru kapan saja, dan gaya tersebut akan otomatis ditampilkan di tampilan peta untuk Anda dan pengguna dalam waktu sekitar enam jam.

Jika ingin segera melihat perubahan, Anda dapat menutup dan memulai ulang aplikasi dengan keluar dari aplikasi, memaksa aplikasi keluar dari daftar aplikasi yang baru digunakan, lalu membukanya kembali. Peta yang diperbarui kemudian akan terlihat.

JavaScript

Untuk membuat peta dengan ID peta dalam kode aplikasi Anda:

  1. Jika Anda sudah menyesuaikan peta dengan kode JSON tersemat, hapus properti styles dari objek MapOptions. Jika tidak, lewati langkah ini.

  2. Tambahkan ID peta ke peta menggunakan properti mapId. Contoh:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

Maps Static

Untuk menambahkan ID peta ke peta baru atau yang sudah ada yang menggunakan salah satu API layanan web kami, tambahkan parameter URL map_id dan tetapkan ke ID peta Anda. Contoh ini menunjukkan penambahan ID peta ke peta menggunakan Maps Static API.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

Peta yang berpusat di Jembatan Brooklyn di New York City, NY, AS dengan kontrol peta di sudut kanan bawah. Peta menampilkan gaya visual kustom pada jalan, perairan, dan daratan.

Jika memiliki tanda tangan digital di URL Statis Maps sebelum menambahkan ID peta, Anda harus membuat dan menambahkan tanda tangan digital baru setelah menambahkan ID peta. Saat membuat rahasia penandatanganan URL baru, jangan lupa untuk menghapus tanda tangan digital sebelumnya dari URL.