Penanda

Penanda menunjukkan satu lokasi pada peta.

Secara default, penanda menggunakan ikon standar yang memiliki tampilan dan nuansa Google Maps yang umum. Jika ingin menyesuaikan penanda, Anda dapat mengubah warna penanda default, atau mengganti gambar penanda dengan ikon kustom, atau mengubah properti penanda lainnya.

Sebagai respons terhadap peristiwa klik pada penanda, Anda dapat membuka jendela info. Jendela info menampilkan teks atau gambar dalam jendela dialog di atas penanda. Anda dapat menggunakan jendela info default untuk menampilkan teks, atau membuat jendela info kustom sendiri untuk mengontrol kontennya sepenuhnya.

Menambahkan penanda

Untuk menambahkan penanda, buat objek GMSMarker yang menyertakan position dan title, lalu tetapkan map-nya.

Contoh berikut menunjukkan cara menambahkan penanda ke objek GMSMapView yang ada. Penanda dibuat pada koordinat 10,10, dan menampilkan string "Hello world" di jendela info saat diklik.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

Anda dapat menganimasikan penambahan penanda baru ke peta dengan menetapkan properti marker.appearAnimation ke:

• kGMSMarkerAnimationPop untuk membuat penanda muncul dari groundAnchor-nya saat ditambahkan.
• kGMSMarkerAnimationFadeIn untuk menyebabkan penanda memudar saat ditambahkan.

Menghapus penanda

Anda dapat menghapus penanda dari peta dengan menetapkan properti map dari GMSMarker ke nil. Atau, Anda dapat menghapus semua overlay (termasuk penanda) yang saat ini ada di peta dengan memanggil metode GMSMapView clear.

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let options = GMSMapViewOptions()
options.camera = camera
let mapView = GMSMapView(options: options)
// ...
mapView.clear()
      

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];
// ...
[mapView clear];
      

Jika ingin mengubah penanda setelah menambahkannya ke peta, pastikan Anda tetap mempertahankan objek GMSMarker. Anda dapat mengubah penanda nanti dengan membuat perubahan pada objek ini.

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

Mengubah warna penanda

Anda dapat menyesuaikan warna gambar penanda default dengan meminta versi ikon default yang diwarnai dengan markerImageWithColor:, dan meneruskan gambar yang dihasilkan ke properti ikon GMSMarker.

marker.icon = GMSMarker.markerImage(with: .black)
      

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

Menyesuaikan gambar penanda

Jika ingin mengubah gambar penanda default, Anda dapat menetapkan ikon kustom, menggunakan properti icon atau iconView penanda. Jika iconView ditetapkan, API akan mengabaikan properti icon.

Menggunakan properti icon penanda

Cuplikan berikut membuat penanda dengan ikon kustom yang disediakan sebagai UIImage di properti icon. Ikon berada dalam posisi tengah di London, Inggris. Cuplikan ini mengasumsikan bahwa aplikasi Anda berisi gambar bernama "house.png".

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Jika Anda membuat beberapa penanda dengan gambar yang sama, gunakan instance UIImage yang sama untuk setiap penanda. Tindakan ini membantu meningkatkan performa aplikasi Anda dan mengoptimalkan penggunaan cache tekstur saat menampilkan banyak penanda.

Gambar ini mungkin memiliki beberapa bingkai. Selain itu, properti alignmentRectInsets akan dihormati, yang berguna jika penanda memiliki bayangan atau area lain yang tidak dapat digunakan.

Menggunakan properti iconView penanda

Cuplikan berikut membuat penanda dengan ikon kustom dengan menetapkan properti iconView penanda, dan menganimasikan perubahan warna penanda. Cuplikan ini mengasumsikan bahwa aplikasi Anda berisi gambar bernama "house.png".

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  _mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

Karena iconView menerima UIView, Anda dapat memiliki hierarki kontrol UI standar yang menentukan penanda, dengan setiap tampilan memiliki kumpulan kemampuan animasi standar. Anda dapat menyertakan perubahan pada ukuran, warna, dan tingkat alfa penanda, serta menerapkan transformasi arbitrer. Properti iconView mendukung animasi semua properti UIView yang dapat dianimasikan, kecuali frame dan center.

Perhatikan pertimbangan berikut saat menggunakan iconView:

• UIView dapat menuntut resource saat tracksViewChanges ditetapkan ke YES, yang dapat mengakibatkan peningkatan penggunaan baterai. Sebagai perbandingan, UIImage frame tunggal bersifat statis dan tidak perlu dirender ulang.
• Beberapa perangkat mungkin kesulitan merender peta jika Anda memiliki banyak penanda di layar, dan setiap penanda memiliki UIView-nya sendiri, dan semua penanda melacak perubahan secara bersamaan.
• iconView tidak merespons interaksi pengguna, karena merupakan snapshot tampilan.
• Tampilan akan berperilaku seolah-olah clipsToBounds ditetapkan ke YES, terlepas dari nilai sebenarnya. Anda dapat menerapkan transformasi yang berfungsi di luar batas, tetapi objek yang Anda gambar harus berada dalam batas objek. Semua transformasi/pergeseran dipantau dan diterapkan. Singkatnya: sub-tampilan harus dimuat dalam tampilan.
• Untuk menggunakan -copyWithZone: di GMSMarker, Anda harus menyalin GMSMarker terlebih dahulu, lalu menetapkan instance baru iconView pada salinan. UIView tidak mendukung NSCopying, sehingga tidak dapat menyalin iconView.

Untuk memutuskan kapan harus menetapkan properti tracksViewChanges, Anda harus mempertimbangkan performa dibandingkan dengan keuntungan menggambar ulang penanda secara otomatis. Contoh:

• Jika Anda memiliki serangkaian perubahan yang harus dilakukan, Anda dapat mengubah properti menjadi YES, lalu kembali ke NO.
• Saat animasi berjalan atau konten dimuat secara asinkron, Anda harus tetap menyetel properti ke YES hingga tindakan selesai.

Mengubah opasitas penanda

Anda dapat mengontrol opasitas penanda dengan properti opacity-nya. Anda harus menentukan opasitas sebagai float antara 0,0 dan 1,0, dengan 0 sepenuhnya transparan dan 1 sepenuhnya tidak tembus pandang.

marker.opacity = 0.6
      

marker.opacity = 0.6;
      

Anda dapat menganimasikan opasitas penanda dengan Core Animation menggunakan GMSMarkerLayer.

Mendatarkan penanda

Ikon penanda biasanya digambar dengan berorientasi pada layar perangkat, bukan permukaan peta, sehingga memutar, memiringkan, atau melakukan zoom pada peta tidak selalu mengubah orientasi penanda.

Anda dapat menetapkan orientasi penanda agar datar terhadap bumi. Penanda datar akan berputar saat peta diputar, dan berubah perspektifnya saat peta dimiringkan. Seperti halnya penanda biasa, penanda datar akan tetap mempertahankan ukurannya saat peta diperbesar atau diperkecil.

Untuk mengubah orientasi penanda, tetapkan properti flat penanda ke YES atau true.

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

Memutar penanda

Anda dapat memutar penanda di sekitar titik link-nya dengan menetapkan properti rotation. Tentukan rotasi sebagai jenis CLLocationDegrees, yang diukur dalam derajat searah jarum jam dari posisi default. Jika penanda datar pada peta, posisi default-nya adalah Utara.

Contoh berikut memutar penanda 90°. Menetapkan properti groundAnchor ke 0.5,0.5 menyebabkan penanda diputar di pusatnya, bukan di dasarnya.

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

Menangani peristiwa pada penanda

Anda dapat memproses peristiwa yang terjadi di peta, seperti saat pengguna mengetuk penanda. Untuk memproses peristiwa, Anda harus menerapkan protokol GMSMapViewDelegate. Lihat peristiwa dan gestur penanda untuk mempelajari cara menangani peristiwa penanda tertentu. Panduan untuk peristiwa juga menyediakan daftar metode di GMSMapViewDelegate. Untuk acara Street View, lihat GMSPanoramaViewDelegate.