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

Marker

Marker menunjukkan lokasi tunggal pada peta.

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

Menambahkan marker

Untuk menambahkan marker, buat objek GMSMarker yang menyertakan position, title dan setel map-nya.

Contoh berikut ini memperagakan cara menambahkan marker ke objek GMSMapView yang ada. Marker ini dibuat pada koordinat 10,10, dan menampilkan string "Hello world" dalam sebuah jendela info bila diklik.

Swift

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

Objective-C

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

Anda bisa menganimasikan penambahan marker baru ke peta dengan menyetel properti marker.appearAnimation ke kGMSMarkerAnimationPop.

Membuang marker

Anda bisa membuang marker dari peta dengan menyetel properti map GMSMarker ke nil. Sebagai alternatif, Anda bisa membuang semua overlay (termasuk marker) saat ini di peta dengan memanggil metode GMSMapView clear .

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude: 151.2086, zoom: 6)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
...
[mapView clear];

Jika Anda ingin memodifikasi marker setelah menambahkannya ke peta, pastikan Anda tetap menyimpan objek GMSMarker. Anda bisa memodifikasi marker tersebut nanti dengan membuat perubahan pada objek ini.

Swift

let marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
...
marker.map = nil

Mengubah warna marker

Anda bisa menyesuaikan warna gambar marker default dengan meminta versi berwarna dari ikon default dengan markerImageWithColor:, dan meneruskan gambar yang dihasilkan ke properti ikon GMSMarker.

Swift

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

Objective-C

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

Menyesuaikan gambar marker

Jika ingin mengubah gambar marker default, Anda bisa menyetel ikon khusus, menggunakan properti icon atau iconView marker.

Jika iconView disetel, API mengabaikan properti icon. Pembaruan pada icon saat ini tidak dikenali selama iconView disetel.

Menggunakan properti icon marker

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

Swift

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

Objective-C

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

Jika Anda membuat beberapa marker dengan gambar yang sama, gunakan instance UIImage yang sama untuk setiap marker. Ini membantu meningkatkan kinerja aplikasi Anda saat menampilkan banyak marker.

Gambar ini mungkin memiliki beberapa bingkai. Selain itu, properti alignmentRectInsets diterapkan, yang berguna jika marker memiliki bayangan atau region lain yang tidak bisa digunakan.

Menggunakan properti iconView marker

Cuplikan berikut ini membuat marker dengan ikon khusus dengan menyetel properti iconView marker dan menggerakkan perubahan pada warna marker. Cuplikan tersebut menganggap bahwa aplikasi Anda berisi gambar bernama "house.png".

Swift

import UIKit
import GoogleMaps

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

  override func loadView() {

    let camera = GMSCameraPosition.camera(withLatitude: 51.5,
                                          longitude: -0.127,
                                          zoom: 14)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    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
    })
  }

Objective-C

#import "ViewController.h"
@import GoogleMaps;

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

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

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  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:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

Karena iconView menerima UIView, Anda bisa memiliki hierarki kontrol UI standar yang mendefinisikan marker Anda, dengan setiap tampilan memiliki serangkaian standar kemampuan animasi. Anda bisa menyertakan perubahan pada ukuran marker, warna, dan tingkat alfa, serta menerapkan transformasi sementara. Properti iconView mendukung animasi semua properti UIView yang bisa digerakkan kecuali frame dan center.

Harap perhatikan pertimbangan berikut saat menggunakan iconView:

  • UIView bisa sangat memakan sumber daya jika tracksViewChanges disetel ke YES, yang bisa mengakibatkan peningkatan penggunaan baterai. Sebagai perbandingan, satu bingkai UIImage bersifat statis dan tidak perlu dirender ulang.
  • Beberapa perangkat dapat mengalami kesulitan merender peta jika Anda memiliki terlalu banyak marker di layar, dan setiap marker memiliki UIView sendiri, dan semua marker melacak perubahan dalam waktu yang sama.
  • iconView tidak merespons interaksi pengguna, karena ini hanya merupakan cuplikan tampilan.
  • Tampilan berperilaku seakan-akan clipsToBounds disetel ke YES, apa pun nilainya yang sebenarnya. Anda bisa menerapkan transformasi yang berfungsi di luar garis batas, tetapi objek yang Anda gambar harus berada di dalam garis batas objek. Semua transformasi/perubahan diawasi dan diterapkan. Ringkasnya: subtampilan harus berada di dalam tampilan.

Untuk memutuskan kapan harus menyetel properti tracksViewChanges, Anda harus mempertimbangkan kinerja dan membandingkannya dengan keuntungan menggambar ulang marker secara otomatis. Misalnya:

  • Jika Anda memiliki serangkaian perubahan yang akan dibuat, Anda bisa mengubah properti ke YES lalu mengembalikannya ke NO.
  • Saat animasi berjalan atau materi sedang dimuat secara asinkron, Anda harus mempertahankan properti agar disetel ke YES sampai tindakan selesai.

Mengubah opasitas marker

Anda bisa mengontrol opasitas marker dengan properti opacity. Anda harus menetapkan opasitas sebagai float antara 0.0 dan 1.0, dalam hal ini 0 adalah sepenuhnya transparan dan 1 adalah sepenuhnya tidak tembus pandang.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Anda bisa menggerakkan opasitas marker dengan Animasi Inti melalui GMSMarkerLayer.

Mendatarkan marker

Ikon marker biasanya digambar dengan berorientasi pada layar perangkat dan bukan pada permukaan peta, sehingga memutar, memiringkan atau melakukan zoom pada peta belum tentu mengubah orientasi marker.

Anda bisa menyetel orientasi marker agar datar terhadap bumi. Marker datar akan berputar bila peta diputar, dan berubah perspektifnya bila peta dimiringkan. Sebagaimana marker biasa, marker datar akan mempertahankan ukurannya bila peta diperbesar atau diperkecil.

Untuk mengubah orientasi marker, setel properti flat marker ke YES atau true.

Swift

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

Objective-C

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

Memutar marker

Anda bisa memutar marker di sekitar titik jangkarnya dengan menyetel properti rotation . Tetapkan rotasi sebagai tipe CLLocationDegrees, yang diukur dalam derajat searah jarum jam dari posisi default. Bila marker datar pada peta, maka posisi default adalah Utara.

Contoh berikut memutar marker 90°. Menyetel properti groundAnchor ke 0.5,0.5 menyebabkan marker diputar di pusatnya, bukannya di dasarnya.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x: 0.5, y: 0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

Menambahkan jendela info

Gunakan jendela info untuk menampilkan informasi kepada pengguna bila mereka mengetuk marker. Hanya satu jendela info yang ditampilkan untuk setiap kalinya. Jika pengguna mengetuk marker lain, jendela saat ini akan disembunyikan dan jendela info baru akan terbuka. Materi jendela info didefinisikan oleh properti title dan snippet. Mengeklik marker tidak menampilkan jendela info jika properti title maupun snippet kosong atau nil.

Cuplikan berikut ini membuat marker sederhana, yang hanya berisi judul untuk teks jendela info.

Swift

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

Objective-C

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

Dengan properti snippet, Anda bisa menambahkan teks tambahan yang akan muncul di bawah judul, dengan font lebih kecil. String yang lebih panjang dari lebar jendela info otomatis dirapikan menjadi beberapa baris. Pesan yang sangat panjang mungkin akan terpotong.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

Menyetel jendela info agar otomatis disegarkan

Setel tracksInfoWindowChanges di marker ke YES atau true jika Anda ingin properti baru atau materi jendela info agar langsung ditampilkan saat diubah, bukannya menunggu jendela info disembunyikan dan ditampilkan kembali. Default-nya adalah NO atau false.

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

Untuk memutuskan kapan harus menyetel properti tracksInfoWindowChanges, Anda harus mempertimbangkan kinerja dan membandingkannya dengan keuntungan menggambar ulang jendela info secara otomatis. Misalnya:

  • Jika Anda memiliki serangkaian perubahan yang akan dibuat, Anda bisa mengubah properti ke YES lalu mengembalikannya ke NO.
  • Saat animasi berjalan atau materi sedang dimuat secara asinkron, Anda harus mempertahankan properti agar disetel ke YES sampai tindakan selesai.

Pelajari catatan untuk pertimbangan saat menggunakan properti iconView marker.

Mengubah posisi jendela info

Jendela info digambar dengan berorientasi pada layar perangkat, yang berpusat di atas marker terkait. Anda bisa mengubah posisi jendela info sesuai dengan marker, dengan menyetel properti infoWindowAnchor. Properti ini menerima CGPoint, yang didefinisikan sebagai offset (x, y), dalam hal ini x dan y berkisar antara 0.0 dan 1.0. Offset default-nya adalah (0.5, 0.0), yaitu tengah atas. Menyetel offset infoWindowAnchor berguna untuk menyejajarkan jendela info dengan ikon khusus.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

Menangani kejadian pada marker dan jendela info

Anda bisa memantau kejadian yang terjadi pada peta, seperti saat pengguna mengetuk marker atau jendela info. Untuk memantau kejadian, Anda harus mengimplementasikan protokol GMSMapViewDelegate. Lihat panduan kejadian dan daftar metode pada GMSMapViewDelegate. Untuk kejadian Street View, lihat GMSPanoramaViewDelegate.

Kirim masukan tentang...

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