[ios | swift] 구글 지도 연동하기 & 현재 위치에 마커 표시하기 | Google Maps SDK for ios

지도 관련 앱을 구현하면서 각종 지도 sdk는 다 써보는 것 같다...

써보니까 각각 다 장단점이 있으나 그건 따로 포스팅하도록 하겠다.

 

오늘은 구글 지도를 연동해볼 것이다.

연동하려면 다음과 같은 절차가 필요하다.

 

1. 시작하기 전!

- 1. 구글 클라우드에 프로젝트 만들기

- 2. 결제 계정 추가 & 프로젝트 연동

- 3. API 키 발급 받기

 

위 절차를 하려면 아래 링크에 어떻게 하면 되는지 상세하게 나와있다. Step1, Step2, Step3를 다 수행해주자.

https://developers.google.com/maps/documentation/ios-sdk/begin?hl=ko#enable-api-sdk 

Before You Begin  |  Maps SDK for iOS  |  Google Developers

 

2. 코드 작성

스토리보드 없이 코드로 연동해볼 것이다. 먼저 스토리보드를 없애주자.

-1. Main.storyboard 파일을 먼저 삭제한다.

-2. info.plist에 가서 Application Scene Manifest > Scene Configuration > Application Session Role > item 0 에 Storyboard Name을 지워야 한다. 값만 지우는 것이 아니고 Storyboard Name 칸을 통째로 지워야한다.

-3. MainViewController 파일 확인

스토리보드는 지워졌지만 MainView 라는 파일로 MainViewController는 남아있을 것이다. 없다면 MainView.swift 파일을 만들어주자.

class MainViewController: UIViewController {
	override func viewDidLoad() {
    	super.viewDidLoad()
    }
}

-4. SceneDelegate에 코드 추가

스토리보드를 없앴으니, 처음에 나올 화면을 정해주어야 한다. 그걸 SceneDelegate에서 해준다.

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
	var window: UIWindow? //window 멤버 변수 선언
    
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let scene = (scene as? UIWindowScene) else { return }
        
        window = UIWindow(windowScene: scene)
        
        let vc = MainViewController()
        window?.rootViewController = vc
        window?.makeKeyAndVisible()
    }
	
    ...
}

앞에서 봤던 MainViewController()를 window에 추가해주는 코드이다. 

-5. MainViewController에 지도 추가

구글지도를 추가하고, 현재 위치(위도, 경도)를 얻어와서 마커로 표시하는 코드이다.

class MainViewController: UIViewController {

	var locationManager = CLLocationManager() //좌표를 얻어오기 위한 변수
    
	override func viewDidLoad() {
    	locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        
        if CLLocationManager.locationServicesEnabled() {
            locationManager.startUpdatingLocation() 
            let currentLat = locationManager.location?.coordinate.latitude ?? 0 //위도
            let currentLng = locationManager.location?.coordinate.longitude ?? 0 //경도
            
            let camera = GMSCameraPosition(latitude: currentLat, longitude: currentLng, zoom: 17) //현재 위도, 경도로 카메라를 이동, 줌 레벨(확대되는 정도)는 17로 설정
            let mapID = GMSMapID(identifier: "{YOUR API KEY}") // 발급받은 API 키로 맵 객체 생성
            let mapView = GMSMapView(frame: view.frame, mapID: mapID, camera: camera) // mapView 객체 생성
            self.view.addSubview(mapView) // view에 mapView를 서브뷰로 추가
            
            let marker = GMSMarker() // 마커 객체 생성
            marker.position = CLLocationCoordinate2D(latitude: currentLat, longitude: currentLng) // 마커의 위치를 현재 위도, 경도로 설정
            marker.title = "현재 위치" // 마커 터치하면 나오는 말풍선에 표시할 대제목
            marker.snippet = "테스트" // 마커 터치하면 나오는 말풍선에 표시할 소제목
            marker.map = mapView // 마커를 표시할 맵
        }
    }
}

< 결과 화면 >