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 sebuah project, dan juga dibatasi untuk satu platform (Android, iOS, JavaScript) atau untuk Maps Static API.

Untuk membuat atau mengelola ID peta di Cloud Console, Anda harus memiliki peran IAM Pemilik Project atau Editor Project.

Izin yang diperlukan

Untuk membuat atau mengelola ID peta atau Gaya peta di project Google Cloud tertentu, Anda harus memiliki peran IAM Pemilik atau Editor di project tersebut.

Membuat ID peta

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

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 Berikutnya 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. Di 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 drop-down yang memungkinkan pengguna mengaitkan gaya peta dengan ID Peta ini.

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">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 Cloud Console 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 saat ini Anda 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 cara menambahkan 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 Jembatan Brooklyn di New York City, NY, AS dengan kontrol peta di sudut kanan bawah. Peta menampilkan gaya visual kustom pada jalan, air, 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.

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 di sisi klien menggunakan WebGL.
Tersedia di JavaScript