Menambahkan peta ke aplikasi iOS (Swift)

1. Sebelum Memulai

Codelab ini mengajarkan Anda cara mulai menggunakan Google Maps Platform untuk membuat aplikasi iOS di Swift. 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.

Peta dengan penanda di aplikasi iOS

Prasyarat

  • Pengetahuan dasar tentang pengembangan Swift dan iOS.

Yang akan Anda pelajari

  • 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 kamera peta secara terprogram.
  • Menggambar pada peta.

Yang akan Anda perlukan

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

  • Xcode 12.0 atau versi yang lebih tinggi dengan target SDK 12.0 atau versi yang lebih baru.
  • Cocoapods terinstal.
  • Akun Google Cloud Platform dengan penagihan diaktifkan (lihat langkah berikutnya).
  • Project di Cloud Console dengan Maps SDK for iOS diaktifkan (lihat langkah berikutnya).

2. Memulai penyiapan

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.

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

  1. 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.
  2. 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.

Panduan memulai

Untuk membantu Anda memulai secepatnya, berikut beberapa kode awal untuk membantu Anda mengikuti codelab ini.

  1. Lakukan clone repositori jika sudah menginstal git.
git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

Atau, klik Beri saya kode untuk mendownload kode sumber.

  1. Setelah mendownload kode, buka project StarterApp di direktori /starter. Project ini mencakup struktur file dasar yang Anda butuhkan untuk menyelesaikan codelab. Semua yang Anda butuhkan ada di direktori /starter/StarterApp.

Untuk melihat kode solusi lengkap berjalan, lihat kode yang sudah selesai 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.

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

Codelab ini 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 Podfile dan update file untuk menyertakan dependensi Maps SDK for iOS dan Library Utilitas di bagian komentar # Pods for StarterApp:

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

Periksa dokumentasi Versi Maps SDK for iOS untuk mendapatkan versi terbaru SDK dan panduan pemeliharaan.

Podfile Anda akan terlihat seperti ini:

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

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end
  1. 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 mendownload dependensi dan membuat StarterApp.xcworkspace secara otomatis.

  1. Setelah dependensi diinstal, jalankan open StarterApp.xcworkspace dari direktori /starter untuk membuka file 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.
  2. Impor SDK dalam AppDelegate.swift.

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 UIKit:

import GoogleMaps
  1. Teruskan kunci API ke iOS SDK dengan memanggil provideAPIKey dalam GMSServices di application: didFinishLaunchingWithOptions:
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

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

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

Ganti YOUR_API_KEY dengan kunci API yang Anda buat di Cloud Console.

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:

  1. Buka ViewController.swift.

Di sinilah Anda akan melakukan pekerjaan lainnya untuk codelab ini. Perhatikan bahwa peristiwa siklus proses loadView dan viewDidLoad untuk pengontrol tampilan sudah diganti untuk Anda.

  1. Impor Maps SDK for iOS dengan menambahkan hal berikut di bagian atas file:
import GoogleMaps
  1. Deklarasikan variabel instance ViewController untuk menyimpan GMSMapView.

Instance GMSMapView adalah objek utama yang 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:

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}
  1. Di loadView, buat instance GMSCameraPosition.

GMSCameraPosition menentukan tempat peta dipusatkan dan tingkat zoom yang 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:

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)
  1. Di loadView, buat instance GMSMapView untuk membuat instance peta.

Untuk membuat instance peta baru, panggil GMSMapView(frame: CGRect, camera: GMSCameraPosition). Perhatikan bagaimana bingkai ditetapkan ke CGRect.zero, 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.

Selanjutnya, untuk menampilkan peta, tetapkan tampilan root dari pengontrol tampilan ke mapView, yang akan membuat peta ditampilkan dalam layar penuh.

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  1. Tetapkan GMSMapViewDelegate ke pengontrol tampilan.

Saat diterapkan, delegasi tampilan peta memungkinkan Anda menangani peristiwa dari interaksi pengguna di instance GMSMapView, yang akan Anda butuhkan nanti.

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

class ViewController: UIViewController, GMSMapViewDelegate

Selanjutnya, tambahkan hal berikut di fungsi loadView untuk menetapkan GMSMapViewDelegate ke ViewController.

    mapView.delegate = self

Sekarang muat ulang aplikasi di simulator iOS (Command+R), dan peta akan muncul seperti yang ditampilkan dalam Gambar 1.

Aplikasi iOS yang menampilkan Google Maps

Gambar 1. Aplikasi iOS yang menampilkan Google Maps.

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

File ViewController.swift Anda sekarang akan terlihat seperti ini:

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. Menata Gaya Peta (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:

  1. Membuat ID peta.
  2. 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.swift 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.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

Setelah menyelesaikannya, jalankan aplikasi untuk melihat peta dalam 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 menampilkan titik tertentu pada peta, dan merupakan elemen UI yang umum untuk menangani interaksi pengguna. Jika Anda pernah menggunakan Google Maps sebelumnya, maka Anda mungkin terbiasa dengan penanda default, yang terlihat seperti pin merah dalam Gambar 2:

Peta dengan penanda merah

Gambar 2. Peta dengan penanda merah.

Langkah ini menunjukkan 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 selesaikan langkah-langkah berikut dalam peristiwa siklus proses viewDidLoad, yang dipanggil setelah tampilan (dan peta) dimuat.

  1. 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 diakses dari tampilan peta menggunakan properti camera.target.latitude dan camera.target.longitude.

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
  1. 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.

    let marker = GMSMarker(position: mapCenter)
  1. 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. Perhatikan 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(named: "custom_pin.png")
  1. Render penanda ke peta.

Penanda telah dibuat, namun belum ada 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 seperti yang ditampilkan dalam Gambar 3.

Aplikasi iOS yang menampilkan Google Maps dengan penanda merah di pusat peta.

Gambar 3. Aplikasi iOS yang menampilkan Google Maps dengan penanda merah di pusat peta.

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.swift sekarang akan terlihat seperti ini:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. Mengaktifkan Pengelompokan Penanda

Jika Anda menggunakan banyak penanda, atau memiliki penanda yang letaknya saling berdekatan, Anda mungkin mengalami masalah ketika 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 yang terlihat dalam Gambar 4:

Dua penanda yang sangat berdekatan

Gambar 4. Dua penanda yang sangat berdekatan.

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 yang ditampilkan dalam Gambar 5:

Contoh penanda yang dikelompokkan menjadi satu ikon

Gambar 5. Contoh penanda yang dikelompokkan menjadi satu ikon.

Algoritme untuk pengelompokan penanda membagi area peta yang terlihat menjadi sebuah petak, lalu mengelompokkan ikon yang berada di sel yang sama. Tim Google Maps Platform telah membuat library utilitas open source yang berguna, yang disebut Library Utilitas Google Maps SDK for iOS yang, antara lain, menangani pengelompokan penanda secara otomatis untuk Anda. Baca selengkapnya tentang pengelompokan penanda di dokumentasi Google Maps Platform, atau lihat sumber untuk Library Utilitas iOS di GitHub.

  1. 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 MarkerGenerator.swift.

Untuk menambahkan jumlah penanda yang ditentukan ke peta Anda, panggil MarkerGenerator(near:count:).markerArray 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 dapat meneruskan variabel mapCenter yang Anda buat sebelumnya. Penanda ditampilkan dalam [GMSMarker].

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

Anda dapat menguji tampilan penanda sebanyak ini dengan menambahkan baris ini setelah definisi markerArray, lalu menjalankan aplikasi. Pastikan untuk mengomentari baris ini sebelum melanjutkan ke langkah berikutnya, yang menggunakan Pengelompok Penanda untuk mengelola tampilan penanda:

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }
  1. 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.swift:

import GoogleMapsUtils
  1. 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. Tambahkan hal berikut:

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
  1. 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:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

Selanjutnya, buat instance GMUClusterManager dalam peristiwa siklus proses viewDidLoad:

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)
  1. Tambahkan penanda dan jalankan pengelompok penanda.

Setelah instance pengelompok penanda Anda dikonfigurasi, teruskan pengelola cluster array penanda yang akan dikelompokkan dengan memanggil add(items:), lalu jalankan pengelompok dengan memanggil cluster.

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

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

Aplikasi iOS dengan Google Maps dan penanda yang dikelompokkan

Gambar 6. Aplikasi iOS dengan Google Maps dan penanda yang dikelompokkan.

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.swift sekarang akan terlihat seperti ini:

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. Menambahkan Interaksi Pengguna

Anda sekarang 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 MapView mencakup metode yang memungkinkan Anda memicu eksekusi kode untuk interaksi, seperti pengguna mengklik peta dan penanda, menggeser tampilan peta, memperbesar dan memperkecil, dan lainnya.

Pada langkah ini, Anda secara terprogram menggeser peta ke tengah pada penanda apa pun yang diketuk oleh pengguna.

  1. Terapkan pemroses ketuk penanda.

mapView(_:didTap:) dipanggil setiap kali pengguna mengetuk salah satu penanda yang Anda buat sebelumnya, dan 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.swift sebelum kurung kurawal penutup.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

Perhatikan bahwa metode ini menampilkan false. 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.

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

Saat dipanggil, mapView(_:didTap:) akan meneruskan instance GMSMarker yang diketuk sehingga Anda dapat menanganinya dalam kode. Anda dapat menggunakan instance ini untuk memusatkan kembali peta dengan memanggil animate(toLocation:) di tampilan peta dari dalam pengendali peristiwa, dan meneruskan posisi instance penanda dari properti position.

    // Animate to the marker
    mapView.animate(toLocation: marker.position)
  1. Perbesar cluster penanda saat diketuk.

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

Seperti disebutkan sebelumnya, ikon cluster penanda sebenarnya 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 animate(toZoom:) di instance tampilan peta dan menetapkan zoom ke tingkat zoom saat ini plus satu. Tingkat zoom saat ini tersedia di instance mapView dalam properti camera.zoom.

Selain itu, perhatikan bagaimana kode di bawah menampilkan true. 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 the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

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, di 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(_:didTap:) Anda akan terlihat seperti ini:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

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 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. Pada langkah ini, render lingkaran untuk menampilkan radius 800 meter (sekitar setengah mil) di sekeliling penanda saat diklik.

  1. Tambahkan variabel instance circle ke implementasi ViewController.

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

Untuk melakukannya, update implementasi ViewController seperti berikut:

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}
  1. Gambar lingkaran saat penanda diketuk.

Di bagian bawah metode mapView(_:didTap:) tepat di atas pernyataan return false, tambahkan kode yang ditampilkan di sini untuk membuat instance class GMSCircle di iOS SDK untuk menggambar lingkaran radius 800 meter baru dengan memanggil GMSCircle(position:radius:) dan meneruskan posisi penanda yang diketuk tersebut seperti yang Anda lakukan saat memusatkan kembali peta.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
  1. Tentukan gaya lingkaran.

Secara default, GMSCircle menggambar lingkaran dengan goresan hitam dan isian transparan. Ini 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 yang ditampilkan di sini menambahkan pengisian abu-abu dengan transparansi 50%:

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
  1. Render lingkaran pada peta.

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

    circle?.map = mapView
  1. 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 circle ke nil di bagian atas mapView(_:didTap:).

    // Clear previous circles
    circle?.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 seperti yang ditampilkan dalam Gambar 7.

Lingkaran yang digambar di sekeliling penanda yang diketuk

Gambar 7. Lingkaran yang digambar di sekeliling penanda yang diketuk.

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

Metode mapView(_:didTap:) akan terlihat seperti ini:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. Selamat

Anda telah berhasil membuat aplikasi iOS yang menampilkan peta Google interaktif.

Yang telah Anda pelajari

Apa selanjutnya?

  • Jelajahi atau fork repositori GitHub maps-sdk-for-ios-samples sampel dan demo untuk mendapatkan lebih banyak inspirasi
  • Belajar dari codelab Swift lainnya untuk membuat aplikasi iOS dengan Google Maps Platform
  • Bantu kami membuat konten yang menurut Anda paling berguna dengan menjawab pertanyaan di bawah:

Apa saja codelab lain yang ingin Anda lihat?

Visualisasi data pada peta Selengkapnya tentang cara menyesuaikan gaya peta saya Membuat interaksi 3D di peta

Apakah codelab yang Anda inginkan tidak tercantum di atas? Ajukan permintaan bersama masalah baru di sini.