Menambahkan peta

Pilih platform: Android iOS JavaScript

Peta direpresentasikan di API oleh class GMSMapView, subclass dari UIView. Peta adalah objek yang paling signifikan di Maps SDK for iOS, dan menyediakan metode yang diperlukan untuk menambahkan, menghapus dan mengelola objek lain seperti penanda dan polyline.

Pengantar

Maps SDK for iOS memungkinkan Anda menampilkan peta Google dalam aplikasi iOS. Peta ini memiliki tampilan yang sama dengan peta yang Anda lihat di aplikasi iOS Google Maps, dan SDK mengekspos banyak fitur yang sama.

Selain fungsi pemetaan, API tersebut juga mendukung berbagai interaksi yang konsisten dengan model UI iOS. Misalnya, Anda dapat menyiapkan interaksi dengan peta dengan menentukan penjawab yang bereaksi terhadap gestur pengguna, seperti ketuk dan ketuk dua kali.

Class utama saat menangani objek Map adalah class GMSMapView. GMSMapView menangani operasi berikut secara otomatis:

  • Menghubungkan ke layanan Google Maps.
  • Mendownload ubin peta.
  • Menampilkan ubin pada layar perangkat.
  • Menampilkan berbagai kontrol seperti geser dan zoom.
  • Merespons gestur geser dan zoom dengan menggerakkan peta dan memperbesar atau memperkecil.
  • Merespons gestur dua jari dengan memiringkan sudut pandang peta.

Selain operasi otomatis ini, Anda dapat mengontrol perilaku dan tampilan peta melalui properti dan metode yang diekspos oleh class GMSMapView. GMSMapView memungkinkan Anda menambahkan dan menghapus penanda, overlay bumi, dan polyline, mengubah jenis peta yang ditampilkan, dan mengontrol apa yang ditampilkan di peta melalui class GMSCameraPosition.

Membuat Maps dengan SwiftUI

SwiftUI menawarkan cara tambahan untuk membuat UI menggunakan pendekatan deklaratif. Anda memberi tahu SwiftUI bagaimana Anda ingin tampilan terlihat beserta semua statusnya yang berbeda, dan sistem akan melakukan sisanya. SwiftUI menangani update tampilan setiap kali status yang mendasarinya berubah karena peristiwa atau tindakan pengguna.

Maps SDK for iOS dibuat berdasarkan UIKit dan belum menyediakan tampilan yang kompatibel dengan SwiftUI. Menambahkan peta di SwiftUI harus sesuai dengan UIViewRepresentable atau UIViewControllerRepresentable. Untuk mempelajari lebih lanjut, lihat Codelab menambahkan peta ke aplikasi iOS dengan SwiftUI.

Menambahkan peta

Langkah-langkah dasar untuk menambahkan peta:

  1. Untuk memperoleh SDK, mendapatkan kunci API, dan menambahkan framework yang diperlukan, ikuti langkah-langkah dalam artikel berikut:

    1. Menyiapkan Project di Google Cloud Console

    2. Menggunakan kunci API

    3. Menyiapkan Project Xcode

  2. Di AppDelegate, berikan kunci API Anda ke metode class provideAPIKey: di GMSServices.

  3. Membuat atau mengupdate ViewController. Jika peta akan ditampilkan saat pengontrol tampilan ini terlihat, pastikan untuk membuatnya dalam metode loadView.

    1. Buat objek GMSCameraPosition yang menentukan pusat dan tingkat zoom peta. Saat membuat instance objek GMSMapView, Anda harus meneruskan objek GMSCameraPosition sebagai parameter wajib.

    2. Buat dan buat instance class GMSMapView menggunakan metode GMSMapView mapWithFrame:. Jika peta ini akan digunakan sebagai satu-satunya tampilan pengontrol tampilan, maka CGRectZero dapat digunakan sebagai bingkai peta — peta akan diubah ukurannya secara otomatis.

    3. Tetapkan objek GMSMapView sebagai tampilan pengontrol tampilan, misalnya self.view = mapView;.

Contoh di bawah ini menambahkan peta, yang berpusat di pusat kota Singapura, ke aplikasi.

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    let camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    let mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
  }
}

Objective-C

#import "MapObjects.h"
@import GoogleMaps;

@implementation MapObjects

- (void)viewDidLoad {
  [super viewDidLoad];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                          longitude:103.848
                                                               zoom:12];
  GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = mapView;
}

@end

Setelah mengikuti langkah-langkah ini, Anda dapat mengonfigurasi objek GMSMapView lebih lanjut.

Langkah berikutnya

Setelah menyelesaikan langkah-langkah ini, Anda dapat mengonfigurasi setelan peta.