[Flutter] 플로터로 앱에서 구글 맵(Google Maps) Key를 얻는법 설정방법 권한설정 및 간단한 사용법을 알아봅시다.

1. Google Maps API Key 얻는 방법

1. Google Cloud Console 접속
   • https://console.cloud.google.com/ 접속
   • Google 계정으로 로그인
2. 프로젝트 생성 또는 선택
   • 기존 프로젝트 선택하거나 새 프로젝트 생성 (예: FlutterMapApp)
3. Google Maps SDK for Android / iOS 활성화
   • 왼쪽 메뉴에서 API 및 서비스 > 라이브러리 선택
   • 검색창에 Maps SDK for Android, Maps SDK for iOS 입력하여 각각 활성화(Enable)
4. API 키 생성
   • API 및 서비스 > 사용자 인증 정보(Credentials) 이동
   • 상단의 "+ 사용자 인증 정보 만들기" > API 키 선택
   • 생성된 키 복사해둠
5. API 키 제한 설정 (선택 사항, 보안 목적)
   • 생성된 키 클릭
   • 앱이 호출하는 플랫폼(Android/iOS)을 지정하여 앱 패키지명 또는 번들 ID 기반으로 제한 가능

 

 

2. Flutter에 필요한 의존성 추가

# pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.6.0  # 최신 버전 확인

 

# 의존성 설치
flutter pub get

 

---

✅ 3. Android 설정

🔹 1) android/app/src/main/AndroidManifest.xml 설정

<manifest>
  <application>
    <!-- 위치 권한 (필요시) -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

    <!-- Google Maps API 키 설정 -->
    <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="YOUR_API_KEY_HERE"/>
  </application>
</manifest>

 

🔹 2) android/app/build.gradle 확인

defaultConfig {
    applicationId "com.example.your_app"
    minSdkVersion 20  // 최소 20 이상
}

 

---

✅ 4. iOS 설정

🔹 1) ios/Runner/AppDelegate.swift (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_API_KEY_HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Objective-C일 경우에는 AppDelegate.m 파일에서 GMSServices provideAPIKey:@"YOUR_API_KEY" 추가

🔹 2) ios/Runner/Info.plist

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>지도 사용을 위해 위치 접근 권한이 필요합니다.</string>

 

---

✅ 5. Flutter 코드에서 구글 맵 사용 예시

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GoogleMapScreen(),
    );
  }
}

class GoogleMapScreen extends StatefulWidget {
  @override
  _GoogleMapScreenState createState() => _GoogleMapScreenState();
}

class _GoogleMapScreenState extends State<GoogleMapScreen> {
  GoogleMapController? mapController;

  final LatLng _center = const LatLng(37.5665, 126.9780); // 서울 시청

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('구글 맵')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
        myLocationEnabled: true, // 현재 위치 표시
      ),
    );
  }
}

---

✅ 6. 테스트 시 주의사항

• 에뮬레이터에서는 지도가 동작하지 않을 수 있음 → 실제 기기에서 테스트 권장
• API 키에 플랫폼 제한을 걸었으면, 올바른 SHA-1, 번들 ID가 설정되어 있는지 확인