Gaya visual peta baru akan segera tersedia di Google Maps Platform. Perubahan pada gaya visual peta ini mencakup palet warna default baru dan peningkatan pada pengalaman dan kegunaan peta. Semua gaya peta akan otomatis diperbarui pada Maret 2025. Untuk mengetahui informasi selengkapnya tentang ketersediaan dan cara ikut menggunakan versi terbaru ini lebih awal, lihat artikel Gaya peta baru untuk Google Maps Platform.
Halaman ini adalah panduan cepat untuk menata gaya visual peta Anda, menggunakan mode malam sebagai contoh.
Ringkasan
Dengan opsi gaya, Anda dapat menyesuaikan presentasi
gaya peta, mengubah tampilan visual fitur seperti jalan, taman,
bisnis, dan lokasi menarik lainnya. Artinya, Anda dapat menekankan
komponen peta tertentu atau menyesuaikan peta dengan gaya aplikasi
Anda.
Penataan gaya hanya berfungsi pada jenis peta kGMSTypeNormal.
Menerapkan gaya pada peta Anda
Untuk menerapkan gaya peta kustom ke peta, panggil GMSMapStyle(...) untuk membuat
Instance GMSMapStyle, yang meneruskan URL untuk file JSON lokal, atau JSON
string yang berisi definisi gaya. Tetapkan instance GMSMapStyle ke
Properti mapStyle peta.
Menggunakan file JSON
Contoh berikut menunjukkan cara memanggil GMSMapStyle(...) dan meneruskan URL untuk
file lokal:
Swift
importGoogleMapsclassMapStyling:UIViewController{// Set the status bar style to complement night-mode.overridevarpreferredStatusBarStyle:UIStatusBarStyle{return.lightContent}overridefuncloadView(){letcamera=GMSCameraPosition.camera(withLatitude:-33.86,longitude:151.20,zoom:14.0)letmapView=GMSMapView.map(withFrame:CGRect.zero,camera:camera)do{// Set the map style by passing the URL of the local file.ifletstyleURL=Bundle.main.url(forResource: "style",withExtension: "json"){mapView.mapStyle=tryGMSMapStyle(contentsOfFileURL:styleURL)}else{NSLog("Unabletofindstyle.json")}}catch{NSLog("Oneormoreofthemapstylesfailedtoload.\(error)")}self.view=mapView}}
Objective-C
#import "MapStyling.h"
@importGoogleMaps;@interfaceMapStyling()@end@implementationMapStyling// Set the status bar style to complement night-mode.-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}-(void)loadView{GMSCameraPosition*camera=[GMSCameraPositioncameraWithLatitude:-33.86longitude:151.20zoom:12];GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZerocamera:camera];mapView.myLocationEnabled=YES;NSBundle*mainBundle=[NSBundlemainBundle];NSURL*styleUrl=[mainBundleURLForResource:@"style"withExtension:@"json"];NSError*error;// Set the map style by passing the URL for style.json.GMSMapStyle*style=[GMSMapStylestyleWithContentsOfFileURL:styleUrlerror:&error];if(!style){NSLog(@"Thestyledefinitioncouldnotbeloaded:%@",error);}mapView.mapStyle=style;self.view=mapView;}@end
Untuk menentukan opsi gaya, tambahkan file baru ke project Anda yang bernama style.json,
dan tempelkan deklarasi gaya JSON berikut untuk gaya visual mode malam:
Contoh berikut menunjukkan pemanggilan GMSMapStyle(...) dan penerusan string
referensi:
Swift
classMapStylingStringResource:UIViewController{letMapStyle= "JSON_STYLE_GOES_HERE"
// Set the status bar style to complement night-mode.overridevarpreferredStatusBarStyle:UIStatusBarStyle{return.lightContent}overridefuncloadView(){letcamera=GMSCameraPosition.camera(withLatitude:-33.86,longitude:151.20,zoom:14.0)letmapView=GMSMapView.map(withFrame:CGRect.zero,camera:camera)do{// Set the map style by passing a valid JSON string.mapView.mapStyle=tryGMSMapStyle(jsonString:MapStyle)}catch{NSLog("Oneormoreofthemapstylesfailedtoload.\(error)")}self.view=mapView}}
Objective-C
@implementationMapStylingStringResource// Paste the JSON string to use.staticNSString*constkMapStyle=@"JSON_STYLE_GOES_HERE";// Set the status bar style to complement night-mode.-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}-(void)loadView{GMSCameraPosition*camera=[GMSCameraPositioncameraWithLatitude:-33.86longitude:151.20zoom:12];GMSMapView*mapView=[GMSMapViewmapWithFrame:CGRectZerocamera:camera];mapView.myLocationEnabled=YES;NSError*error;// Set the map style by passing a valid JSON string.GMSMapStyle*style=[GMSMapStylestyleWithJSONString:kMapStyleerror:&error];if(!style){NSLog(@"Thestyledefinitioncouldnotbeloaded:%@",error);}mapView.mapStyle=style;self.view=mapView;}@end
Untuk mendefinisikan pilihan gaya, tempel string gaya berikut sebagai nilai
variabel kMapStyle:
Peta bergaya menggunakan dua konsep untuk menerapkan warna dan perubahan gaya lainnya pada peta:
Pemilih menentukan komponen geografis yang dapat Anda tata gayanya pada peta. Komponen ini mencakup jalan, taman, perairan, dan lainnya, bersama labelnya. Pemilih menyertakan fitur dan elemen, yang ditetapkan sebagai properti featureType dan elementType.
Styler adalah properti warna dan visibilitas yang dapat Anda terapkan pada elemen peta. Styler menentukan warna yang ditampilkan melalui
kombinasi nilai hue, warna, dan kecerahan/gamma.
Lihat referensi gaya untuk mengetahui deskripsi mendetail tentang opsi gaya visual JSON.
Gunakan Wizard Gaya Visual Maps Platform sebagai cara cepat
untuk membuat objek gaya visual JSON. Maps SDK for iOS mendukung
deklarasi gaya yang sama seperti Maps JavaScript API.
Contoh kode lengkap
Repositori ApiDemos di GitHub mencakup contoh yang menunjukkan penggunaan penataan gaya.