[iOS] URL Scheme으로 지도 앱 연동하기 (TMap, kakaoMap, naver지도)

모리스·2024년 7월 5일
0

iOS

목록 보기
15/17
post-thumbnail

iOS 지도 앱 연동 (URL Scheme)

이번 노트에서는 URL Scheme을 사용하여 한국에서 대표적으로 많이 쓰이는 지도 앱들을 연동하는 방법에 대해 기술하려한다.
앱이 설치돼 있으면 앱을 실행 시켜 절정한 위치가 노출되도록 하며, 설치되어 있지 않다면 app store로 이동해 앱 설치를 유도한다.


🛠 사전 설정

URL Scheme을 사용하려면 Project file > TARGETS > Info 탭에서 Queried URL Schemes 항목을 추가해야 한다.
설정하지 않으면 앱이 Scheme을 인식하지 못해 동작하지 않는다.

설정 이미지


🚗 티맵 연동

func openTMap(latitude: Double, longitude: Double) {
    let urlString = "tmap://route?rGoName=목적지명&rGoX=\(longitude)&rGoY=\(latitude)"
    // 목적지명에 공백과 같은 url 작성 규칙에 중복되면 url query로 인식하여 인코딩 진행
    guard let encodedStr = urlString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
          let url = URL(string: encodedStr),
          // 티맵 앱 스토어 설치 주소
          let appStoreURL = URL(string: "items-apps://itunes.apple.com/app/id431589174")
    else { return }
    
    UIApplication.shared.open(url, options: [:]) { success in
        if !success { UIApplication.shared.open(appStoreURL) }
    }
}

📌 파라미터 설명

  • rGoName: 목적지명 (URL Query Encoding 필요)
  • rGoX: 목적지의 경도 (longitude)
  • rGoY: 목적지의 위도 (latitude)
  • 티맵 앱이 사용자 휴대폰에 있는지 확인 후 있으면 앱을 열어 경로안내 페이지를 노출하고 앱이 설치되어 있지 않으면 티맵 설치 app store로 이동한다.

🗺 카카오맵 연동

func openKakaoMap(latitude: Double, longitude: Double) {
    let urlString = "kakaomap://look?p=\(latitude),\(longitude)"
    guard let encodedStr = urlString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
          let url = URL(string: encodedStr),
          let appStoreURL = URL(string: "itms-apps://itunes.apple.com/app/id304608425")
    else { return }
    
    UIApplication.shared.open(url, options: [:]) { success in
        if !success { UIApplication.shared.open(appStoreURL) }
    }
}

📌 파라미터 설명

  • look: 지정된 좌표 중심으로 지도 노출 및 마커 표시

나는 내비게이션 기능은 필요하지 않았기 때문에 마커로 표시를 사용했고 그 밖에 많은 기능이 있다. 카카오맵 ULR Scheme SDK문서를 보면 아주 깔끔하게 잘 정리되어 있다.
📖 카카오맵 URL Scheme 공식 문서


🗾 네이버 지도 연동

func openNaverMap(latitude: Double, longitude: Double) {
	// 네이버 맵은 URL Scheme을 사용하는 앱또는 웹페이지의 식별자를 필수로 보내게 되어있다.
    let appName = "com.test.test"
    let urlString = "nmap://place?lat=\(latitude)&lng=\(longitude)&name=목적지&appname=\(appName)"
    guard let encodedStr = urlString.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed),
          let url = URL(string: encodedStr),
          let appStoreURL = URL(string: "itms-apps://itunes.apple.com/app/id311867728?mt=8")
    else { return }
    
    UIApplication.shared.open(url, options: [:]) { success in
        if !success { UIApplication.shared.open(appStoreURL) }
    }
}

📌 파라미터 설명

  • place: 지정된 좌표에 마커 표시

네이버 지도도 길찾기, 교통수단, zoom level등 URL Scheme에 정의할 수 있는 여러 옵션들이 많다. 이 또한 네이버맵 URL Scheme 사용법에 대해 문서가 잘 정리되어있다.
📖 네이버맵 URL Scheme 공식 문서


📍 URL Scheme 호출 방법

import CoreLocation

enum SelectedMap {
    case tmap, kakaomap, navermap
}

func openSelectedMap(mapType: SelectedMap, address: String) {
    Task {
        let geocoder = CLGeocoder()
        let placemarks = try? await geocoder.geocodeAddressString(address)
        
        if let location = placemarks?.first?.location {
            let latitude = location.coordinate.latitude
            let longitude = location.coordinate.longitude
            
            switch mapType {
            case .tmap:
                self.openTMap(latitude: latitude, longitude: longitude)
            case .kakaomap:
                self.openKakaoMap(latitude: latitude, longitude: longitude)
            case .navermap:
                self.openNaverMap(latitude: latitude, longitude: longitude)
            }
        }
    }
}

self.openSelectedMap(mapType: .tmap, address: "서울특별시 송파구 올림픽로 300")

📌 설명

  • CoreLocation을 사용해 주소를 위경도로 변환 후 선택된 지도 앱 실행
  • SelectedMap Enum을 활용해 코드 가독성 향상
profile
모바일 앱 개발 노트 :)

0개의 댓글

관련 채용 정보