플러터 - Google Maps

Inyeong Kang·2023년 7월 16일
1

Google Cloud에서 google map key 받기

  1. Google Cloud에서 프로젝트를 생성한 후 API 및 서비스 -> 라이브러리

  2. map이라고 검색하여 Maps SDK를 찾는다.

  3. Maps SDK for iOS와 Maps SDK for Android에 각각 들어가서 사용 버튼을 클릭한다.

  4. 관리 버튼을 클릭하여 이동한 Google Maps Platform에서 좌측에 보이는 "키 및 사용자 인증 정보"를 클릭한다.

** API 키 부분에 이전 프로젝트에서 만들어둔 키가 있다 ?! 하지만 다시 만들어주기 위해서 상단의 "사용자 인증 정보 만들기"를 클릭하고 API 키 선택한다.

  1. API 키 3개가 생성된다.


    (Android와 iOS 마다의 설정을 할 수도 있지만 우선 진행해 보았다)

Flutter에 google_map_flutter 라이브러리 적용

flutter pub add google_maps_flutter 명령어를 실행해서 라이브러리를 추가한다.

결과

< 안드로이드 >
1. android/app/build.gradle 경로에 minSdkVersion를 20으로 설정한다.

Android SDK 20 이나 더 높아야 한다는 것을 의미한다.


2. AndroidManifest.xml에 해당 meta-data를 추가하고 YOUR KEY HERE 부분에 이전에 생성한 API KEY를 넣는다.

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

[ 실행 ]
그저 하얀 화면만 나오는군..

< iOS >
1. iOs -> Runner -> AppDelegate.swift에 코드를 수정하고 키를 넣는다.

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

추가 안드로이드 API 설정)
윈도우의 경우, 터미널에 keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android 명령어 입력해서 SHA1 알아내기.

Android 앱 추가 부분에 "패키지 이름"과 "SHA-1 인증서 디지털 지문"에 각각 내용을 넣고 저장한다.

추가 iOS API 설정)
iOS 제한사항에서 ADD를 클릭한 후 "번들 ID"에 내용을 넣고 저장한다.

완료)
새로운 API Key들을 AndroidManifest.xml과 AppDelegate.swift 파일에 적용한다.

추가 디버깅) 설정했는데도 마찬가지 현상
로그를 확인했더니 ERROR가 있었다.

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(error, API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml, null, java.lang.RuntimeException: API key not found.  Check that <meta-data android:name="com.google.android.geo.API_KEY" android:value="your API key"/> is in the <application> element of AndroidManifest.xml


찾아보니 flutter clean을 해주라고 해서 해봤는데 동일한 현상에 동일한 에러...
알고 보니 meta-data 태그 삽입을 application 태그 안에 해야하는데 activity 태그 안에 넣어버려서 생기는 문제였다..!
최종적으로는 잘 적용되었다.

profile
안녕하세요. 강인영입니다. GDSC에서 필요한 것들을 작업하고 업로드하려고 합니다!

2개의 댓글

comment-user-thumbnail
2024년 3월 22일

"meta-data 태그 삽입을 application 태그 안에 해야하는데 activity 태그 안에 넣어버려서 생기는 문제였다..!"
감사합니다..

1개의 답글