Menggunakan ID Peta

ID peta adalah ID yang dikaitkan dengan gaya atau fitur peta tertentu. Konfigurasikan gaya peta dan kaitkan dengan ID peta di Google Cloud Console. Selanjutnya, saat Anda mereferensikan ID peta dalam kode, gaya peta yang terkait akan ditampilkan di aplikasi Anda. Setiap perubahan gaya yang selanjutnya Anda buat akan otomatis ditampilkan di aplikasi, tanpa perlu update dari pelanggan.

Setelah dibuat, ID peta dikaitkan dengan project, dan juga dibatasi untuk satu platform (Android, iOS, JavaScript) atau untuk Maps Static API.

Untuk membuat atau mengelola ID peta di Konsol Cloud, Anda harus memiliki sertifikat Peran IAM Pemilik atau Project Editor.

Izin yang diperlukan

Untuk membuat atau mengelola ID peta atau Gaya peta dalam diberikan project Google Cloud, Anda harus memiliki Peran IAM Pemilik atau Editor pada proyek.

Membuat ID peta

ID peta adalah ID unik yang mewakili satu instance Peta. Anda dapat membuat ID peta dan memperbarui gaya yang dikaitkan dengan ID peta kapan saja di Konsol Cloud.

Untuk membuat ID peta:

  1. Di Cloud Console, buka halaman Pengelolaan Peta.
  2. Pilih Buat ID Peta Baru untuk menampilkan formulir Buat ID Peta Baru.
    Buat ID Peta Baru

    Dalam formulir, lakukan hal berikut:

    • Tentukan nama peta.
    • Tentukan jenis atau platform peta.
    • Untuk peta JavaScript, pilih jenis peta raster atau vektor.
    • Masukkan deskripsi peta.
    • Pilih Next untuk menampilkan ID peta baru.

Mengaitkan ID peta ke gaya peta

Petunjuk ini mengasumsikan bahwa setidaknya ada satu gaya peta yang sudah ada dalam project Anda.

  1. Di Cloud Console, buka halaman Pengelolaan Peta.
  2. Pada halaman ini, pilih ID peta yang sudah ada dari kolom Nama peta.
  3. Di bagian bawah formulir ini, pilih gaya peta dari menu drop-down Gaya peta yang terkait dengan ID Peta ini.
  4. Pilih Simpan.
    Screenshot yang menampilkan halaman detail untuk satu ID peta, termasuk kolom dropdown yang memungkinkan pengguna mengaitkan gaya peta dengan ID Peta ini.

Menambahkan ID peta ke aplikasi

Android

Tambahkan ID peta Anda melalui elemen <fragment> di elemen aktivitas file tata letak otomatis, 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">YOUR_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"
    class="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, seperti yang telah dikonfigurasi pada langkah pertama, akan diterapkan ke semua peta yang memiliki ID.

iOS

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

  1. Buat GMSMapID dengan string ID peta dari Konsol Cloud.
  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: "<YOUR 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:@"<YOUR 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 diterapkan pada tampilan peta Anda, dan pengguna dalam waktu sekitar enam jam.

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

JavaScript

Untuk membuat peta dengan ID peta dalam kode aplikasi Anda:

  1. Jika saat ini Anda menyesuaikan peta dengan kode JSON tersemat, hapus Properti styles dari objek MapOptions Anda; 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, 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=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />

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

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

Fitur yang tersedia saat menggunakan ID peta

Gaya visual peta berbasis Cloud: tata gaya, sesuaikan, dan kelola peta Anda menggunakan Konsol Google Cloud.
Tersedia di semua platform (Android, JavaScript, iOS, dan Maps Static API)

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