Menambahkan peta

Pilih platform: Android iOS JavaScript

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

Pengantar

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

Selain fungsi pemetaan, API ini juga mendukung berbagai interaksi yang konsisten dengan model UI iOS. Misalnya, Anda dapat mengatur meningkatkan interaksi dengan peta dengan mendefinisikan perespons yang bereaksi terhadap {i>gesture <i}pengguna, seperti ketuk dan ketuk dua kali.

Class utama saat menangani 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 diekspos oleh Class GMSMapView. GMSMapView memungkinkan Anda menambah dan menghapus penanda, memberi overlay dan polyline, mengubah jenis peta yang ditampilkan, dan mengontrol yang ditampilkan di peta melalui GMSCameraPosition .

Membuat Maps dengan SwiftUI

SwiftUI menawarkan cara tambahan untuk membuat UI menggunakan pendekatan deklaratif. Anda beri tahu SwiftUI bagaimana Anda ingin tampilan Anda terlihat bersama dengan semua status yang berbeda dan sistem akan mengerjakan sisanya. SwiftUI menangani pembaruan tampilan kapan pun perubahan status yang mendasarinya karena suatu peristiwa atau tindakan pengguna.

Maps SDK for iOS dibuat di UIKit dan tidak menyediakan yang kompatibel dengan SwiftUI. Untuk menambahkan peta di SwiftUI, Anda harus mematuhi UIViewRepresentable atau UIViewControllerRepresentable. Untuk mempelajari lebih lanjut, lihat Codelab menambahkan peta ke aplikasi iOS dengan dengan SwiftUI.

Menambahkan peta

Langkah-langkah dasar untuk menambahkan peta:

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

    1. Menyiapkan Project di Google Cloud Console

    2. Menggunakan kunci API

    3. Menyiapkan Project Xcode

    4. Di AppDelegate, berikan kunci API Anda ke provideAPIKey: pada GMSServices.

    5. Buat atau update ViewController. Jika peta ditampilkan saat 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 dengan Objek GMSCameraPosition. Ini menentukan pusat dan tingkat zoom dari di peta.

    8. Membuat dan membuat instance class GMSMapView menggunakan GMSMapView Metode options:. Jika peta ini akan digunakan sebagai pengontrol tampilan hanya melihat, nilai default opsi peta frame dari CGRectZero dapat digunakan sebagai tampilan frame — peta diubah ukurannya 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 GMSMapView lebih lanjut .

Langkah berikutnya

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