Menambahkan peta

Pilih platform: Android iOS JavaScript

Peta direpresentasikan dalam API oleh class GMSMapView, a subclass dari UIView. Peta adalah objek 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 Google Map di aplikasi iOS. Peta ini memiliki tampilan yang sama dengan peta yang Anda lihat di aplikasi Google Maps iOS, dan SDK ini menampilkan banyak fitur yang sama.

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

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

  • Menghubungkan ke layanan Google Maps.
  • Mendownload petak peta.
  • Menampilkan petak peta 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 ditampilkan oleh class GMSMapView. Gunakan GMSMapView untuk menambahkan dan menghapus penanda, overlay dasar, dan polyline, mengubah jenis peta yang ditampilkan, dan mengontrol apa yang ditampilkan di peta melalui class GMSCameraPosition.

Membuat Peta dengan SwiftUI

SwiftUI menawarkan cara tambahan untuk membuat UI menggunakan pendekatan deklaratif. Anda memberi tahu SwiftUI bagaimana Anda ingin tampilan diperlihatkan bersama dengan semua statusnya yang berbeda, dan sistem akan melakukan sisanya. SwiftUI menangani pembaruan tampilan setiap kali status yang mendasari berubah karena adanya peristiwa atau tindakan pengguna.

Maps SDK for iOS dibuat atas dasar UIKit dan tidak menyediakan tampilan yang kompatibel dengan SwiftUI. Menambahkan peta di SwiftUI mengharuskan Anda mematuhi 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 konsol Google Cloud

    2. Menggunakan kunci API

    3. Menyiapkan Project Xcode

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

    5. Buat atau perbarui ViewController. Jika peta ditampilkan saat pengontrol tampilan ini terlihat, pastikan untuk membuatnya dalam metode viewDidLoad.

    6. Saat menginisialisasi tampilan peta, tetapkan opsi konfigurasi dengan GMSMapViewOptions. Properti mencakup frame, camera, mapID,backgroundColor, atau screen.

    7. Tetapkan properti opsi peta camera Anda dengan objek GMSCameraPosition. Hal ini menentukan pusat dan tingkat zoom peta.

    8. Buat dan buat instance class GMSMapView menggunakan metode GMSMapView options:. Jika peta ini akan digunakan sebagai satu-satunya tampilan pengontrol tampilan, nilai default CGRectZero opsi peta frame dapat digunakan sebagai frame tampilan — ukuran peta akan diubah secara otomatis.

    9. 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 options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

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

Langkah berikutnya

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