Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps SDK for iOS

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps SDK for iOS
  3. Buat kunci yang sesuai
Lanjutkan

Penataan Gaya Peta dengan Cepat - Mode Malam

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

Ringkasan

Dengan opsi gaya, Anda bisa menyesuaikan presentasi gaya peta Google standar, mengubah tampilan visual dari fitur seperti jalan raya, taman, bisnis, dan tempat menarik lainnya. Ini berarti Anda bisa menekankan komponen tertentu dari peta atau membuat peta melengkapi gaya aplikasi Anda.

Penataan gaya hanya berfungsi pada tipe peta kGMSTypeNormal.

Menerapkan gaya pada peta Anda

Untuk menerapkan gaya peta khusus pada 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 pemanggilan GMSMapStyle(...) dan penerusan URL untuk file lokal:

Swift

Contoh kode berikut mengasumsikan proyek Anda berisi file bernama style.json:

import UIKit
import GoogleMaps

class ViewController: 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

Contoh kode berikut mengasumsikan proyek Anda berisi file bernama style.json:

#import "ViewController.h"
@import GoogleMaps;

@implementation ViewController

// 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 mendefinisikan opsi gaya, tambahkan file baru ke proyek Anda yang bernama style.json, dan tempelkan deklarasi gaya JSON berikut untuk penataan gaya mode-malam:

Menggunakan sumber daya string

Contoh berikut menunjukkan pemanggilan GMSMapStyle(...) dan penerusan sumber daya string:

Swift

import UIKit
import GoogleMaps

let kMapStyle = "[" +
"  {" +
"    \"featureType\": \"poi.business\"," +
"    \"elementType\": \"all\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }," +
"  {" +
"    \"featureType\": \"transit\"," +
"    \"elementType\": \"labels.icon\"," +
"    \"stylers\": [" +
"      {" +
"        \"visibility\": \"off\"" +
"      }" +
"    ]" +
"  }" +
"]"
class ViewController: 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 a valid JSON string.
      mapView.mapStyle = try GMSMapStyle(jsonString: kMapStyle)
    } catch {
      NSLog("One or more of the map styles failed to load. \(error)")
    }

    self.view = mapView
  }
}

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

Objective C

#import "ViewController.h"
@import GoogleMaps;

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

@implementation ViewController

// 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 pilihan gaya, tempelkan string gaya berikut sebagai nilai variabel kMapStyle:

Deklarasi gaya JSON

Peta bergaya menggunakan dua konsep untuk menerapkan warna dan perubahan gaya lain pada peta:

  • Pemilih menentukan komponen geografis yang bisa Anda tata gayanya pada peta. Ini termasuk jalan, taman, badan air, dan lainnya, juga labelnya. Pemilih meliputi fitur dan elemen yang ditetapkan sebagai properti featureType dan elementType.
  • Styler adalah properti warna dan visibilitas yang bisa Anda terapkan pada elemen peta. Semua ini menentukan warna yang ditampilkan melalui kombinasi nilai hue, color, dan lightness/gamma.

Lihat referensi gaya untuk keterangan detail tentang opsi penataan gaya JSON.

Google Maps APIs Styling Wizard

Gunakan Google Maps APIs Styling Wizard sebagai cara cepat untuk menghasilkan objek penataan gaya JSON. Google Maps SDK for iOS Mendukung deklarasi gaya yang sama seperti Google 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 penataan gaya.

Kirim masukan tentang...

Google Maps SDK for iOS
Google Maps SDK for iOS
Butuh bantuan? Kunjungi halaman dukungan kami.