Menambahkan peta ke aplikasi iOS (Objective-C)

21 menit tersisa

Tentang codelab ini

Terakhir diperbarui Mar 18, 2022

Ditulis oleh Tim Google Maps Platform

1. Sebelum Memulai

Abstrak

Di codelab ini, Anda akan mempelajari semua yang Anda perlukan untuk mulai menggunakan Google Maps Platform untuk membuat aplikasi iOS di Objective-C. Anda akan mempelajari semua dasar-dasar, mulai dari melakukan persiapan hingga memuat Maps SDK for iOS, menampilkan peta pertama, menggunakan penanda dan pengelompokan penanda, menggambar di peta, dan menangani interaksi pengguna.

Yang akan Anda buat

Di codelab ini, Anda akan membuat aplikasi iOS yang melakukan hal berikut:

Memuat Maps SDK for iOS dan Library Utilitas Maps SDK for iOS
Menampilkan peta yang berpusat di Sydney, Australia
Menampilkan penanda kustom untuk 100 titik di sekitar Sydney
Menerapkan pengelompokan penanda
Memungkinkan interaksi pengguna yang memusatkan kembali peta dan menggambar lingkaran pada peta saat penanda diklik

Yang akan Anda pelajari

Memulai Google Maps Platform
Memuat Maps SDK for iOS dan Library Utilitas Google Maps SDK for iOS
Memuat peta
Menggunakan penanda, penanda kustom, dan pengelompokan penanda
Menggunakan sistem peristiwa Maps SDK for iOS untuk memberikan interaksi pengguna
Mengontrol peta secara terprogram
Menggambar pada peta

Prasyarat

Anda harus mempelajari item di bawah untuk menyelesaikan codelab ini. Jika Anda sudah terbiasa menggunakan Google Maps Platform, langsung buka codelab.

Produk Google Maps Platform yang diperlukan

Di codelab ini, Anda akan menggunakan produk Google Maps Platform berikut:

Maps SDK for iOS
Library Utilitas Google Maps SDK for iOS

Memulai Google Maps Platform

Jika Anda belum pernah menggunakan Google Maps Platform, ikuti panduan Memulai Google Maps Platform atau tonton playlist Memulai Google Maps Platform untuk menyelesaikan langkah-langkah berikut:

Membuat akun penagihan.
Membuat project.
Mengaktifkan API dan SDK Google Maps Platform (tercantum di bagian sebelumnya).
Membuat kunci API.

Persyaratan lain untuk codelab ini

Untuk menyelesaikan codelab ini, Anda memerlukan akun, layanan, dan alat berikut:

Akun Google Cloud Platform dengan penagihan diaktifkan
Kunci Google Maps Platform API dengan Maps SDK for iOS diaktifkan
Pengetahuan dasar tentang Objective-C
Xcode 12.0 dengan SDK target 12.0 atau versi yang lebih baru

2. Memulai persiapan

Untuk langkah pengaktifan di bawah, Anda harus mengaktifkan Maps SDK for iOS.

Menyiapkan Google Maps Platform

Jika Anda belum memiliki akun Google Cloud Platform dan project dengan penagihan diaktifkan, lihat panduan Memulai Google Maps Platform untuk membuat akun penagihan dan project.

Di Cloud Console, klik menu drop-down project lalu pilih project yang ingin Anda gunakan untuk codelab ini.

Aktifkan API dan SDK Google Maps Platform yang diperlukan untuk codelab ini di Google Cloud Marketplace. Untuk melakukannya, ikuti langkah-langkah dalam video ini atau dokumentasi ini.
Buat kunci API di halaman Kredensial di Cloud Console. Anda dapat mengikuti langkah-langkah dalam video ini atau dokumentasi ini. Semua permintaan ke Google Maps Platform memerlukan kunci API.

Penyiapan Template Permulaan Project

Sebelum memulai codelab ini, lakukan hal berikut untuk mendownload template project permulaan, serta kode solusi lengkap:

Download atau lakukan fork repo GitHub untuk codelab ini di https://github.com/googlecodelabs/maps-platform-101-objc.

Project StarterApp terletak di direktori /starter dan menyertakan struktur file dasar yang Anda butuhkan untuk menyelesaikan codelab. Semua yang Anda butuhkan ada di direktori /starter/StarterApp.

Jika ingin melihat kode solusi lengkap berjalan, Anda dapat menyelesaikan langkah-langkah penyiapan di atas dan melihat solusinya di direktori /solution/SolutionApp.

3. Menginstal Maps SDK for iOS

Langkah pertama untuk menggunakan Maps SDK for iOS adalah menginstal dependensi yang diperlukan. Ada dua langkah untuk proses ini: menginstal Maps SDK for iOS dan Library Utilitas Maps SDK for iOS dari pengelola dependensi Cocoapods, dan memberikan kunci API ke SDK.

Tambahkan Maps SDK for iOS dan Library Utilitas Maps SDK for iOS ke Podfile.

Di codelab ini, Anda akan menggunakan Maps SDK for iOS, yang menyediakan semua fungsi inti Google Maps dan Library Utilitas Maps iOS, yang menyediakan berbagai utilitas untuk memperkaya peta Anda, termasuk pengelompokan penanda.

Untuk memulai, di Xcode (atau editor teks pilihan Anda) buka Pods > Podfile dan update file untuk menyertakan dependensi Maps SDK for iOS dan Library Utilitas di bagian use_frameworks!:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

Instal pod Maps SDK for iOS dan Library Utilitas Maps SDK for iOS.

Untuk menginstal dependensi, jalankan pod install di direktori /starter dari command line. Cocoapods akan mendownload dependensi secara otomatis, serta membuat StarterApp.xcworkspace. 3. Setelah dependensi diinstal, buka StarterApp.xcworkspace di Xcode, lalu jalankan aplikasi di simulator iPhone dengan menekan Command+R. Jika semuanya telah disiapkan dengan benar, simulator akan diluncurkan dan menampilkan layar hitam. Jangan khawatir, Anda belum membuat apa pun, jadi ini adalah hal wajar. 4. Impor SDK dalam AppDelegate.h.

Setelah dependensi diinstal, kini saatnya memberikan kunci API Anda ke SDK. Langkah pertama adalah mengimpor Maps SDK for iOS sebagai dependensi dengan meletakkan item berikut di bawah pernyataan impor #import "AppDelegate.h":

@import GoogleMaps;

Di bawah pernyataan impor SDK iOS, deklarasikan konstanta NSString dengan nilai yang ditetapkan ke kunci API Anda:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

Teruskan kunci API ke SDK iOS dengan memanggil provideAPIKey di GMSServices pada application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

File AppDelegate.m yang telah diupdate sekarang akan terlihat seperti ini:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

Podfile Anda akan terlihat seperti ini:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

Setelah dependensi diinstal dan kunci API disediakan, Anda siap untuk mulai melakukan panggilan ke Maps SDK for iOS.

4. Menampilkan Peta

Sekarang saatnya menampilkan peta pertama Anda.

Bagian Maps SDK for iOS yang paling umum digunakan adalah class GMSMapView, yang menyediakan banyak metode yang memungkinkan Anda membuat dan memanipulasi instance peta. Berikut adalah cara melakukannya:

Buka ViewController.m.

Di sinilah Anda akan melakukan semua pekerjaan yang tersisa untuk codelab ini. Anda akan melihat peristiwa siklus proses loadView dan viewDidLoad untuk pengontrol tampilan sudah diganti untuk Anda. 2. Impor Maps SDK for iOS dengan menambahkan hal berikut di bagian atas file:

@import GoogleMaps;

Deklarasikan variabel instance ViewController untuk menyimpan GMSMapView.

Instance GMSMapView adalah objek utama yang akan Anda gunakan di sepanjang codelab ini, dan Anda akan merujuknya serta menindaklanjutinya dari berbagai metode siklus proses pengontrol tampilan. Agar dapat tersedia, update implementasi ViewController untuk mendeklarasikan variabel instance untuk menyimpannya:

@implementation ViewController {
  GMSMapView *_mapView;
}

Di loadView, buat instance GMSCameraPosition.

GMSCameraPosition menentukan tempat peta akan dipusatkan dan tingkat zoom yang akan ditampilkan. Kode ini memanggil metode cameraWithLatitude:longitude:zoom: untuk memusatkan peta di Sydney, Australia, pada lintang -33,86 dan bujur 151,20, dengan tingkat zoom 12:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

Di loadView, buat instance GMSMapView untuk membuat instance peta.

Untuk membuat instance peta baru, panggil mapWithFrame:camera:. Perhatikan bagaimana bingkai ditetapkan ke CGRectZero, yang merupakan variabel global dari library CGGeometry iOS yang menentukan bingkai dengan lebar 0, tinggi 0, yang terletak di posisi (0,0) dalam pengontrol tampilan. Kamera ditetapkan ke posisi kamera yang baru saja Anda buat.

Untuk benar-benar menampilkan peta, selanjutnya Anda akan menetapkan tampilan root dari pengontrol tampilan ke _mapview, yang akan membuat peta ditampilkan dalam layar penuh.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

Tetapkan GMSMapViewDelegate ke pengontrol tampilan.

Saat diterapkan, delegasi tampilan peta memungkinkan Anda menangani peristiwa dari interaksi pengguna pada instance GMSMapView, yang akan Anda butuhkan pada langkah-langkah berikutnya.

Pertama, update antarmuka ViewController agar sesuai dengan protokol untuk GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

Kemudian, tambahkan hal berikut untuk menetapkan GMSMapViewDelegate ke ViewController.

_mapView.delegate = self;

Sekarang muat ulang aplikasi di simulator iOS (Command+R), dan peta akan muncul.

Sebagai ringkasan, pada langkah ini Anda telah membuat instance GMSMapView untuk menampilkan peta yang berpusat di kota Sydney, Australia.

File ViewController.m Anda sekarang akan terlihat seperti ini:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. Penataan gaya peta berbasis cloud (Opsional)

Anda dapat menyesuaikan gaya peta menggunakan Penataan gaya peta berbasis cloud.

Membuat ID Peta

Jika Anda belum membuat ID peta dengan gaya peta terkait, lihat panduan ID Peta untuk menyelesaikan langkah-langkah berikut:

Membuat ID peta.
Mengaitkan ID peta ke gaya peta.

Menambahkan ID Peta ke aplikasi Anda

Untuk menggunakan ID peta yang Anda buat di langkah sebelumnya, buka file ViewController.m dan dalam metode loadView, buat objek GMSMapID, lalu berikan ID peta ke objek tersebut. Selanjutnya, ubah pembuatan instance GMSMapView dengan memberikan objek GMSMapID sebagai parameter.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

Setelah menyelesaikannya, jalankan aplikasi untuk melihat peta dengan gaya yang Anda pilih.

6. Menambahkan Penanda ke Peta

Ada banyak hal yang dilakukan developer dengan Maps SDK for iOS, tetapi menempatkan penanda pada peta tentunya merupakan hal yang paling populer. Penanda memungkinkan Anda menampilkan titik tertentu pada peta, dan merupakan elemen UI yang umum untuk menangani interaksi pengguna. Jika pernah menggunakan Google Maps sebelumnya, Anda mungkin terbiasa dengan penanda default, yang terlihat seperti ini:

Pada langkah ini, Anda akan mempelajari cara menggunakan class GMSMarker untuk menempatkan penanda pada peta.

Perhatikan bahwa penanda tidak dapat ditempatkan pada peta sampai setelah peta dimuat dari langkah sebelumnya dalam peristiwa siklus proses loadView di pengontrol tampilan. Jadi Anda akan menyelesaikan langkah-langkah ini dalam peristiwa siklus proses viewDidLoad, yang dipanggil setelah tampilan (dan peta) dimuat.

Tentukan objek CLLocationCoordinate2D.

CLLocationCoordinate2D adalah struct yang disediakan oleh library CoreLocation iOS, yang menentukan lokasi geografis pada lintang dan bujur yang telah ditetapkan. Untuk mulai membuat penanda pertama Anda, tentukan objek CLLocationCoordinate2D dan tetapkan lintang dan bujur ke pusat peta. Koordinat pusat tengah peta dapat diakses dari tampilan peta, menggunakan properti camera.target.latitude dan camera.target.longitude.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

Buat instance GMSMarker.

Maps SDK for iOS menyediakan class GMSMarker. Setiap instance GMSMarker mewakili masing-masing penanda pada peta dan dibuat dengan memanggil markerWithPosition: dan meneruskannya ke objek CLLocationCoordinate2D untuk memberi tahu SDK tentang di mana penanda harus diposisikan pada peta.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

Tetapkan ikon penanda kustom.

Penanda pin merah default untuk Google Maps terlihat bagus, tetapi juga tidak kalah bagus jika peta Anda disesuaikan. Untungnya, sangat mudah menggunakan penanda kustom dengan Maps SDK for iOS. Anda akan melihat bahwa project StarterApp menyertakan gambar yang disebut 'custom_pin.png' untuk Anda gunakan, tetapi Anda dapat menggunakan gambar lain yang diinginkan.

Untuk menetapkan penanda kustom, tetapkan properti icon penanda ke instance UIImage.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

Render penanda ke peta.

Penanda telah dibuat, tetapi Anda belum melihatnya pada peta. Untuk melakukannya, tetapkan properti map instance GMSMarker ke instance GMSMapView.

marker.map = _mapView;

Sekarang muat ulang aplikasi dan lihat peta pertama Anda dengan penanda.

Sebagai ringkasan, di bagian ini Anda telah membuat instance class GMSMarker dan menerapkannya ke tampilan peta untuk menampilkan penanda pada peta. Peristiwa siklus proses viewDidLoad Anda yang diperbarui di ViewController.m sekarang akan terlihat seperti ini:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. Mengaktifkan Pengelompokan Penanda

Saat menggunakan banyak penanda atau penanda yang letaknya saling berdekatan, Anda mungkin mengalami masalah saat penanda tumpang-tindih atau tampak bergerombol, yang menyebabkan pengalaman pengguna menjadi buruk. Misalnya, jika dua penanda sangat berdekatan, Anda bisa saja pada akhirnya menghadapi situasi seperti ini:

Di sinilah pengelompokan penanda diperlukan. Pengelompokan penanda adalah fitur lain yang umum diterapkan, yang mengelompokkan penanda yang letaknya berdekatan menjadi satu ikon, yang akan berubah bergantung pada tingkat zoom, seperti di bawah ini:

Algoritme untuk pengelompokan penanda membagi area peta yang terlihat menjadi sebuah petak, lalu mengelompokkan ikon yang berada di sel yang sama. Untungnya, Anda tidak perlu khawatir tentang hal tersebut karena tim Google Maps Platform telah membuat library utilitas open source yang berguna, yang disebut Library Utilitas Google Maps SDK for iOS. Salah satu fungsi library ini adalah menangani pengelompokan penanda secara otomatis. Anda dapat membaca selengkapnya tentang pengelompokan penanda di dokumentasi Google Maps Platform, atau lihat sumber untuk Library Utilitas iOS di GitHub.

Tambahkan lebih banyak penanda ke peta.

Untuk melihat cara kerja pengelompokan penanda, Anda harus memiliki banyak penanda di peta. Untuk mempermudah, generator penanda yang praktis disediakan untuk Anda di project permulaan di LocationGenerator.m.

Untuk menambahkan sebanyak mungkin penanda ke peta Anda, cukup panggil generateMarkersNear:count: di siklus proses pengontrol tampilan viewDidLoad di bawah kode dari langkah sebelumnya. Metode ini akan membuat jumlah penanda yang ditetapkan dalam count pada lokasi yang acak di sekitar koordinat yang ditetapkan dalam objek CLLocationCoordinate2D. Dalam hal ini, Anda cukup meneruskan variabel mapCenter yang Anda buat sebelumnya. Penanda ditampilkan dalam NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

Impor Library Utilitas Google Maps SDK for iOS.

Untuk menambahkan library utilitas Maps iOS sebagai dependensi ke project Anda, tambahkan hal berikut ke daftar dependensi di bagian atas ViewController.m:

@import GoogleMapsUtils;

Konfigurasikan pengelompok penanda.

Untuk menggunakan pengelompok penanda, Anda perlu menyediakan tiga hal untuk mengonfigurasi cara kerjanya: algoritme pengelompokan, generator ikon, dan perender. Algoritme menentukan perilaku terkait pengelompokan cluster, seperti jarak di antara penanda yang disertakan dalam cluster yang sama. Generator ikon menyediakan ikon cluster yang akan digunakan pada tingkat zoom yang berbeda. Perender menangani rendering ikon cluster yang sebenarnya pada peta.

Jika ingin, Anda dapat menulis semua ini dari awal, tetapi library utilitas Maps iOS menyediakan implementasi default untuk mempermudah prosesnya. Cukup tambahkan hal berikut:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

Buat instance GMUClusterManager.

GMUClusterManager adalah class yang menerapkan pengelompokan penanda, dengan menggunakan algoritme, generator ikon, dan perender yang Anda tentukan. Untuk membuat perender dan menyediakannya ke tampilan peta, pertama tambahkan variabel instance ke implementasi ViewController untuk menyimpan instance pengelola cluster:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

Selanjutnya, buat instance GMUClusterManager dalam peristiwa siklus proses viewDidLoad:

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

Tambahkan penanda dan jalankan pengelompok penanda.

Setelah instance pengelompok penanda Anda dikonfigurasi, Anda hanya perlu meneruskan ke pengelola cluster array penanda yang akan dikelompokkan dengan memanggil addItems:, kemudian menjalankan pengelompok dengan memanggil cluster.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Muat ulang aplikasi Anda, dan Anda akan melihat banyak penanda yang dikelompokkan dengan rapi. Lanjutkan dan cobalah menggunakan tingkat zoom yang berbeda, dengan mencubit dan melakukan zoom pada peta, untuk melihat cluster penanda beradaptasi saat Anda memperbesar/memperkecil.

Sebagai ringkasan, pada langkah ini Anda telah mengonfigurasi instance pengelompok penanda dari Utilitas Library SDK Google Maps for iOS, lalu menggunakannya untuk mengelompokkan 100 penanda pada peta. Peristiwa siklus proses viewDidLoad Anda di ViewController.m sekarang akan terlihat seperti ini:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8. Menambahkan Interaksi Pengguna

Sekarang, Anda memiliki peta yang terlihat bagus yang menampilkan penanda dan menggunakan pengelompokan penanda. Pada langkah ini, Anda akan menambahkan penanganan tambahan tertentu untuk interaksi pengguna menggunakan GMSMapViewDelegate, yang Anda tetapkan ke pengontrol tampilan sebelumnya, untuk meningkatkan kualitas pengalaman pengguna peta Anda.

Maps SDK for iOS menyediakan sistem peristiwa komprehensif yang diterapkan melalui delegasi tampilan peta, yang mencakup pengendali peristiwa yang memungkinkan Anda menjalankan kode saat berbagai interaksi pengguna terjadi. Misalnya, delegasi tampilan peta menyertakan metode yang memungkinkan Anda mengaktifkan eksekusi kode untuk interaksi seperti pengguna mengklik peta dan penanda, menggeser tampilan peta, memperbesar dan memperkecil, dan lainnya.

Pada langkah ini, Anda akan membuat peta digeser ke pusat secara terprogram pada setiap penanda yang diketuk oleh pengguna.

Terapkan pemroses ketuk penanda.

mapView:didTapMarker dipanggil setiap kali pengguna mengetuk salah satu penanda yang Anda buat sebelumnya, serta setiap kali pengguna mengetuk cluster penanda (cluster penanda secara internal diterapkan sebagai instance GMSMarker).

Untuk menerapkan pemroses peristiwa, mulai dengan menggantinya (stubbing) di bagian bawah ViewController.m sebelum pernyataan end.

Anda akan melihat bahwa metode menampilkan NO. Tindakan ini akan memberi tahu iOS SDK untuk terus menjalankan fungsi GMSMarker default, seperti menampilkan jendela info jika salah satunya dikonfigurasi, setelah menjalankan kode pengendali peristiwa Anda.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

Tangani peristiwa ketukan dan animasikan kamera untuk memusatkan kembali peta saat penanda atau cluster penanda diketuk.

Saat dipanggil, mapView:didTapMarker akan meneruskan instance GMSMarker yang diketuk, sehingga Anda dapat menanganinya dalam kode. Anda dapat menggunakan instance ini untuk memusatkan kembali peta dengan memanggil animateToLocation: pada tampilan peta dari dalam pengendali peristiwa, dan meneruskan posisi instance penanda, yang tersedia di properti position.

[_mapView animateToLocation:marker.position];

Perbesar cluster penanda saat diketuk.

Pola UX yang umum adalah memperbesar cluster penanda saat diketuk. Ini memungkinkan pengguna untuk melihat penanda yang dikelompokkan, karena cluster akan diperluas pada tingkat zoom yang lebih rendah.

Seperti disebutkan sebelumnya, ikon cluster penanda sebenarnya hanya merupakan implementasi dari GMSMarker dengan ikon khusus. Jadi, bagaimana cara mengetahui apakah penanda atau cluster penanda diketuk? Saat pengelola pengelompok penanda membuat ikon cluster baru, instance GMSMarker akan ditetapkan agar sesuai dengan protokol yang disebut GMUCluster. Anda dapat menggunakan kondisional untuk memeriksa apakah penanda yang diteruskan ke pengendali peristiwa sesuai dengan protokol ini.

Setelah mengetahui secara terprogram bahwa sebuah cluster telah diketuk, Anda dapat memanggil animateToZoom: pada instance tampilan peta dan menetapkan zoom ke tingkat zoom saat ini plus satu. Tingkat zoom saat ini tersedia pada instance tampilan peta di properti camera.zoom.

Selain itu, perhatikan bagaimana kode di bawah menampilkan YES. Ini akan memberi tahu pengendali peristiwa bahwa Anda telah selesai menangani peristiwa dan tidak menjalankan kode lebih lanjut di pengendali. Salah satu alasan melakukan ini adalah untuk mencegah objek GMSMarker pokok menjalankan sisa perilaku defaultnya, seperti menampilkan jendela info, yang tidak akan relevan saat mengetuk ikon cluster.

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

Sekarang muat ulang aplikasi dan ketuk beberapa penanda dan cluster penanda. Jika salah satunya diketuk, peta akan kembali dipusatkan ke tengah pada elemen yang diketuk. Saat cluster penanda diketuk, peta juga akan diperkecil sebesar satu tingkat, dan cluster penanda akan diperluas untuk menampilkan penanda yang dikelompokkan di bawahnya.

Sebagai ringkasan, pada langkah ini Anda telah menerapkan pemroses ketuk penanda, dan menangani peristiwa untuk memusatkan kembali peta pada elemen yang diketuk, dan memperbesar jika elemen tersebut adalah ikon cluster penanda.

Metode mapView:didTapMarker Anda akan terlihat seperti ini:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9. Menggambar di Peta

Sejauh ini, Anda telah membuat peta Sydney yang menampilkan penanda pada 100 titik acak, dan menangani interaksi pengguna. Untuk langkah terakhir dalam codelab ini, Anda akan menggunakan fitur gambar Maps SDK for iOS untuk menambahkan fitur tambahan yang berguna ke pengalaman peta Anda.

Bayangkan peta ini akan digunakan oleh pengguna yang ingin menjelajahi kota Sydney. Fitur yang berguna akan memvisualisasikan radius di sekeliling penanda saat diklik. Ini akan mempermudah pengguna memahami tujuan lain apa saja yang bisa ditempuh dengan berjalan kaki dari penanda yang diklik.

iOS SDK mencakup sekumpulan fungsi untuk menggambar bentuk pada peta, seperti persegi, poligon, garis, dan lingkaran. Selanjutnya, Anda akan merender lingkaran untuk menampilkan radius 800 meter (sekitar setengah mil) di sekeliling penanda saat diklik.

Tambahkan variabel instance _circ ke implementasi ViewController.

Variabel instance ini akan digunakan untuk menyimpan lingkaran yang baru saja digambar, sehingga dapat dihapus sebelum menggambar lingkaran lainnya. Lagi pula, ini tidak akan membantu pengguna dan akan terlihat buruk jika setiap penanda yang diketuk memiliki lingkaran yang digambar di sekelilingnya.

Untuk melakukannya, update implementasi ViewController seperti berikut:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

Gambar lingkaran saat penanda diketuk.

Di bagian bawah metode mapView:didTapMarker, tambahkan kode berikut untuk membuat instance class GMSCircle pada iOS SDK untuk menggambar lingkaran radius 800 meter baru dengan memanggil circleWithPosition:radius: dan meneruskan posisi penanda yang diketuk tersebut, seperti yang Anda lakukan di atas saat memusatkan kembali peta.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

Tentukan gaya lingkaran.

Secara default, GMSCircle menggambar lingkaran dengan goresan hitam dan isian transparan. Ini akan berfungsi untuk menampilkan radius, tetapi tidak terlihat bagus, dan agak sulit untuk dilihat. Selanjutnya, beri warna isian pada lingkaran untuk mempercantik gaya visual dengan menetapkan UIColor ke properti fillColor lingkaran. Kode berikut akan menambahkan pengisian abu-abu dengan transparansi 50%:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

Render lingkaran pada peta.

Sama seperti saat membuat penanda sebelumnya, Anda akan melihat bahwa hanya membuat instance GMSCircle tidak akan membuatnya muncul pada peta. Untuk melakukannya, cukup tetapkan instance tampilan peta ke properti map lingkaran.

_circ.map = _mapView;

Hapus lingkaran yang dirender sebelumnya.

Seperti disebutkan sebelumnya, pengalaman pengguna akan terganggu jika Anda terus menambahkan lingkaran pada peta. Untuk menghapus lingkaran yang dirender oleh peristiwa ketuk sebelumnya, tetapkan properti map _circ ke nil di bagian atas mapView:didTapMarker.

_circ.map = nil;

Muat ulang aplikasi, dan ketuk penanda. Anda akan melihat lingkaran baru yang digambar setiap kali penanda diketuk, dan lingkaran yang dirender sebelumnya akan dihapus.

Sebagai ringkasan, pada langkah ini Anda telah menggunakan class GMSCircle untuk merender lingkaran setiap kali penanda diketuk.

Metode mapView:didTapMarker Anda akan terlihat seperti ini:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Selamat

Anda telah berhasil membuat aplikasi iOS pertama Anda menggunakan Google Maps Platform, termasuk memuat Maps SDK for iOS, memuat peta, menggunakan penanda, mengontrol dan menggambar pada peta, serta menambahkan interaksi pengguna.

Untuk melihat kode yang sudah selesai, lihat project yang telah selesai di direktori /solution.

Apa langkah selanjutnya?

Dalam codelab ini, kita hanya membahas dasar-dasar fungsi Maps SDK for iOS. Selanjutnya, coba tambahkan beberapa fitur berikut ke peta:

Ubah jenis peta untuk menampilkan peta satelit, hibrid, dan medan.
Sesuaikan interaksi pengguna lainnya seperti kontrol zoom dan peta.
Tambahkan jendela info untuk menampilkan informasi saat penanda diklik.
Lihat SDK Places for iOS guna menambahkan data dan fitur tempat Google Maps Platform yang lengkap ke aplikasi Anda.

Untuk terus mempelajari lebih lanjut cara menggunakan Google Maps Platform di web, lihat link berikut:

Laporkan kesalahan