Flutter 구글 지도 (Google maps) 추가하기

Flutter 구글 지도 (Google maps) 추가하기

구글 지도를 추가해 플러터 앱 내에서 사용하는 법을 알아보겠다.

 

1. pubspec.yaml에 의존성 추가 : google_maps_flutter, http, json_serializable

2. Google Maps API 사용을 위한 Key 발급받아 적용하기

3. AndroidManifest.xml 설정 추가

---

 

1. pubspec.yaml에 의존성 추가 : google_maps_flutter, http, json_serializable

 

2. Google Maps API 사용을 위한 Key 발급받아 적용하기

앱에서 Google지도를 사용하려면, 별도의 Google Cloud Platform 에서 프로젝트를 생성하고 API Key를 발급 받아야 한다. API 키를 가지고 다음 단계를 수행하여 Android 및 iOS 애플리케이션을 모두 구성하면 된다.
전혀 어려울 것 없다.

• 사이트 접속해서 나만의 프로젝트 생성하기 : developers.google.com/maps/gmp-get-started

Get Started with Google Maps Platform  |  Google Developers

 

• 생성하면 아래와 같이 접속된 것을 확인할 수 있다.

• 좌측 상단 메뉴를 눌러 API 및 서비스 > 사용자 인증 정보 탭으로 이동한다.

• 사용자 인증 정보를 추가하면 자동으로 API 키가 발급된다. 해당 키를 복사하자.

 

3. AndroidManifest.xml 설정 추가 : </application> 태그를 닫기 직전에 다음 요소를 삽입하여 하위 요소로 추가하자.

 

4. 디지털 지문 인증 추가 : 디버그 인증서 디지털 지문 표시

1. 디버그 키 저장소 파일을 찾습니다. 파일 이름은 debug.keystore이며 프로젝트를 처음 빌드할 때 생성됩니다. 기본적으로 파일은 Android Virtual Device(AVD) 파일과 동일한 디렉터리에 저장됩니다.
   • macOS 및 Linux: ~/.android/
   • Windows Vista 및 Windows 7: C:\Users\your_user_name\.android\
2. SHA-1 디지털 지문을 나열합니다.
   • Linux 또는 macOS의 경우 터미널 창을 열고 다음을 입력합니다.keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
   • Windows Vista 및 Windows 7의 경우 다음을 실행합니다.keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
     ※ keytool 사용을 위해선 java 설치가 필수이다. (java 설치 후 환경변수 Path 추가도 포함)

다음과 비슷한 출력이 표시됩니다.

Google Cloud Platform > 메뉴 > API 및 서비스 > 사용자 인증 정보 > API 키 제한 및 이름 변경

프로젝트 패키지명은 AndroidManifest.xml 파일의 상단을 참고하자.

API 키 제한 체크 > Maps SDK for Android 선택 (항목이 보이지 않으면 GCP 메뉴 > Google 지도 에 가서 '사용' 을 눌러야 한다.)

 

5. 소스 추가

• 화면

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBarWidget('Google maps'),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: const LatLng(0, 0),
          zoom: 2,
        ),
        markers: _markers.values.toSet(),
      ),
    );
  }
}

• 맵 생성 부분

  final Map<String, Marker> _markers = {};
  Future<void> _onMapCreated(GoogleMapController controller) async {
    final googleOffices = await locations.getGoogleOffices();
    setState(() {
      _markers.clear();
      for (final office in googleOffices.offices) {
        final marker = Marker(
          markerId: MarkerId(office.name),
          position: LatLng(office.lat, office.lng),
          infoWindow: InfoWindow(
            title: office.name,
            snippet: office.address,
          ),
        );
        _markers[office.name] = marker;
      }
    });
  }

 

결과 화면