ID peta adalah ID unik yang mewakili setelan gaya dan konfigurasi Google Maps yang disimpan di Google Cloud. 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 Anda butuhkan--JavaScript, Android, iOS, atau peta Statis--di project konsol Google Cloud Anda di halaman Pengelolaan Peta.
Untuk mengetahui detail dan fitur selengkapnya yang menggunakan ID peta, lihat Ringkasan ID peta.
Izin yang diperlukan
Untuk membuat atau mengelola ID peta di project Anda, Anda harus menggunakan principal dengan izin tingkat peran yang sesuai, Editor atau Pemilik, di halaman IAM konsol Cloud untuk project tersebut. Untuk mengetahui detailnya, lihat Referensi peran dasar dan bawaan IAM.
Membuat ID peta
Buat ID peta di konsol Cloud dengan mengikuti langkah-langkah berikut:
Login ke dan buka project konsol Cloud dengan izin yang diperlukan.
Di konsol Cloud, buka halaman Pengelolaan Peta.
Klik Buat ID peta.
Di halaman Buat ID peta baru, lakukan hal berikut:
- Untuk Nama, beri nama ID peta.
- Opsional: Untuk Deskripsi, jelaskan untuk apa ID peta digunakan.
- Untuk Jenis peta, pilih platform tempat Anda berencana menggunakan ID peta. Jika Anda memilih JavaScript, pilih juga jenis peta Raster (default) atau Vektor. Untuk mengetahui informasi selengkapnya tentang peta vektor, lihat Peta Vektor.
- Klik Simpan untuk menampilkan ID peta baru Anda.
Mengaitkan ID peta ke gaya peta
Jika Anda menggunakan gaya visual peta berbasis Cloud, Anda akan mengaitkan gaya peta dengan ID peta Anda. Untuk mengetahui detailnya, lihat Mengaitkan gaya Anda ke ID peta.
Menambahkan ID peta ke aplikasi Anda
Android
Tambahkan ID peta melalui elemen <fragment> dalam file tata letak aktivitas, 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:map="http://schemas.android.com/apk/res-auto"
....
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.
Android 3D
Tetapkan properti String mapId ke Map3DOptions secara terprogram atau menggunakan atribut tata letak. Map3DOptions diberikan ke objek Map3DView selama pembuatan instance dan tidak dapat diubah setelah Map3DView dibuat.
Developer dapat secara opsional menerapkan OnMapIdErrorListener baru untuk mendapatkan notifikasi dan bereaksi terhadap ID peta yang tidak valid atau tidak ditemukan.
Tambahkan ID peta, buat peta secara terprogram, dan tetapkan OnMapIdErrorListener:
import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode
class MainActivity : Activity(), OnMap3DViewReadyCallback, OnMapIdError {
fun onCreate(...) {
val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
val map3DView = Map3DView(context, map3DOptions)
map3DView.getMap3dViewAsync(this)
}
override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
googleMap3D.setMapIdErrorListener(
object : OnMapIdErrorListener {
override fun onMapIdError() {
// Handle error event.
}
}
)
}
}
Tambahkan ID peta menggunakan atribut tata letak:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map3d="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent">
<com.google.android.gms.maps3d.Map3DView
android:id="@+id/map3dView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
map3d:mode="hybrid"
map3d:mapId="MAP_ID"/>
</LinearLayout>
iOS
Untuk membuat instance peta menggunakan ID peta, lakukan hal berikut:
- Buat
GMSMapIDdengan string ID peta dari konsol Cloud. - Buat
GMSMapViewyang 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 Anda untuk Anda dan pengguna dalam waktu sekitar enam jam.
Jika ingin melihat perubahan secara langsung, Anda dapat menutup dan memulai ulang aplikasi dengan keluar dari aplikasi, menghentikan aplikasi secara paksa dari daftar aplikasi yang baru digunakan, lalu membukanya kembali. Peta yang diperbarui akan terlihat.
iOS 3D
Developer iOS dapat menetapkan pengubah style baru di Map. Pengubah ini menerima ID peta dan secara opsional penutupan yang akan dipanggil saat ID peta tidak valid atau tidak ditemukan.
import SwiftUI
import GoogleMaps3D
struct ContentView: View {
init () {
Map.apiKey = "YOUR_API_KEY"
}
var body: some View {
Map(initialCamera: .init(
latitude: 0.0,
longitude: 0.0,
),
mode: .hybrid
)
.style(
with: "MAP_ID",
error: {
// Handle styling error.
}
)
// Could also use trailing closure syntax
// .style(with: "MAP_ID") {
// // Handle styling error.
// }
}
}
JavaScript
Untuk membuat peta dengan ID peta dalam kode aplikasi Anda:
Jika Anda sudah menyesuaikan peta dengan kode JSON yang disematkan, hapus properti
stylesdari objekMapOptions; jika tidak, lewati langkah ini.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' });
JavaScript 3D
Untuk membuat peta dengan ID peta di aplikasi Anda, tambahkan ID peta ke peta menggunakan properti mapId. Contoh:
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200, }, tilt: 67.5, heading: 108.94057782079429, range: 6605.57279990986, mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs. mode: 'HYBRID', }); document.body.append(map); } void init();
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=MAP_ID&signature=YOUR_SIGNATURE" />