Menambahkan Peta Bergaya

Pilih platform: Android iOS JavaScript

Halaman ini adalah panduan cepat untuk menata gaya peta Anda, menggunakan mode malam sebagai contohnya.

Ringkasan

Dengan opsi gaya, Anda dapat menyesuaikan penyajian gaya peta Google standar, mengubah tampilan visual dari 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

Untuk menerapkan gaya peta kustom ke peta, panggil GMSMapStyle(...) untuk membuat instance GMSMapStyle, yang meneruskan URL untuk file JSON lokal, atau string JSON 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

import GoogleMaps

class MapStyling: UIViewController {

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing the URL of the local file.
      if let styleURL = Bundle.main.url(forResource: "style", withExtension: "json") {
        mapView.mapStyle = try GMSMapStyle(contentsOfFileURL: styleURL)
      } else {
        NSLog("Unable to find style.json")
      }
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective-C

#import "MapStyling.h"
@import GoogleMaps;

@interface MapStyling ()

@end

@implementation MapStyling

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSBundle *mainBundle = [NSBundle mainBundle];
  NSURL *styleUrl = [mainBundle URLForResource:@"style" withExtension:@"json"];
  NSError *error;

  // Set the map style by passing the URL for style.json.
  GMSMapStyle *style = [GMSMapStyle styleWithContentsOfFileURL:styleUrl error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", 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:

Menggunakan resource string

Contoh berikut menunjukkan cara memanggil GMSMapStyle(...) dan meneruskan resource string:

Swift

class MapStylingStringResource: UIViewController {

  let MapStyle = "JSON_STYLE_GOES_HERE"

  // Set the status bar style to complement night-mode.
  override var preferredStatusBarStyle: UIStatusBarStyle {
    return .lightContent
  }

  override func loadView() {
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 14.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)

    do {
      // Set the map style by passing a valid JSON string.
      mapView.mapStyle = try GMSMapStyle(jsonString: MapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

Objective-C

@implementation MapStylingStringResource

// Paste the JSON string to use.
static NSString *const kMapStyle = @"JSON_STYLE_GOES_HERE";

// Set the status bar style to complement night-mode.
- (UIStatusBarStyle)preferredStatusBarStyle {
  return UIStatusBarStyleLightContent;
}

- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  mapView.myLocationEnabled = YES;

  NSError *error;

  // Set the map style by passing a valid JSON string.
  GMSMapStyle *style = [GMSMapStyle styleWithJSONString:kMapStyle error:&error];

  if (!style) {
    NSLog(@"The style definition could not be loaded: %@", error);
  }

  mapView.mapStyle = style;
  self.view = mapView;
}

@end

Untuk menentukan opsi gaya, tempelkan string gaya berikut sebagai nilai variabel kMapStyle:

Deklarasi gaya JSON

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.

Wizard Gaya Visual Maps Platform

Membuat gaya kustom untuk API Google Maps Platform

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.

Langkah berikutnya

Lihat cara menyembunyikan fitur pada peta dengan gaya visual.