【iOS/SwiftUI】GoogleMap上の特定の位置にピン（マーカー）を表示する

SwiftUIに戻る

目次

概要

GoogleMapの役割の一つとして、特定の場所にピンを置いてお気に入りのお店などをわかるようにしておくこともある。
今回はそれを実装する。

ソースコード

import SwiftUI

@main
struct TestApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate
    
    var body: some Scene {
        WindowGroup {
            GoogleMapView()
        }
    }
}

import SwiftUI

struct GoogleMapView: View {
    var body: some View {
        VStack {
            ZStack {
                CustomMapView()
            }
            Text("GoogleMap Test")
        }
        .onAppear {
            print("表示されたよ")
        }
    }
}

import SwiftUI
import GoogleMaps

struct CustomMapView: UIViewRepresentable {
    let mapView = GMSMapView()
    var markers: [GMSMarker] = []
    @State var locationManager = CLLocationManager()
    
    func makeCoordinator() -> LocationCoordinator {
        return LocationCoordinator(mapView: self)
    }
    
    func makeUIView(context: Context) -> GMSMapView {
        mapView.isMyLocationEnabled = true
        locationManager.delegate = context.coordinator
        locationManager.requestWhenInUseAuthorization()
        locationManager.distanceFilter = 50
        locationManager.startUpdatingLocation()
        
        return mapView
    }

    func updateUIView(_ mapView: GMSMapView, context: Context) {
    }
}

final class LocationCoordinator: NSObject {
    var parent: CustomMapView
    
    init(mapView: CustomMapView) {
        parent = mapView
        
        parent.markers.append(GMSMarker(position: CLLocationCoordinate2DMake(35.7100069, 139.8108103)))
        for marker in parent.markers {
            marker.icon = #imageLiteral(resourceName: "map_pin")
            marker.map = parent.mapView
        }
    }
}

extension LocationCoordinator: CLLocationManagerDelegate {
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        guard let userLocation = locations.last else { return }
        let camera = GMSCameraPosition.camera(
            withLatitude: userLocation.coordinate.latitude,
            longitude: userLocation.coordinate.longitude,
            zoom: 15.0
        )
        parent.mapView.animate(to: camera)
        parent.locationManager.stopUpdatingLocation()
    }
}

スクリーンショット

詳細

基本的には全キアの内容とほとんど変わらない。
変わった点は以下だ。

まず、GoogleMap上の特定の場所にピンを表示する。今回はスカイツリーに設定している。
ピンを表示する場所は一つとは限らないので、GMSMarkerの配列で定義する。

var markers: [GMSMarker] = []

そして、以下の箇所でピンの位置の設定と、ピンをGoogleMap上に表示する処理をやっている。

parent.markers.append(GMSMarker(position: CLLocationCoordinate2DMake(35.7100069, 139.8108103)))
for marker in parent.markers {
    marker.icon = #imageLiteral(resourceName: "map_pin")
    marker.map = parent.mapView
}

まず、こちらで位置情報の設定を行なっている。
スカイツリーの位置情報はこちらから取得した。

GMSMarker(position: CLLocationCoordinate2DMake(35.7100069, 139.8108103))

そして、設定したピンの数だけアイコンの設定と、GoogleMap上に表示する処理を行う

marker.icon = #imageLiteral(resourceName: "map_pin")
marker.map = parent.mapView

画像はリソースに設定した。
画像のダウンロード元はこちら。

参考ページ

SwiftUIに戻る