[Flutter] Google Maps API 설정 및 사용 방법 (Android & iOS)

Flutter에서 Google Maps SDK를 사용하여 Android와 iOS 앱에서 구글 지도를 표시하는 방법을 정리했습니다.

이 글에서는 Google Maps API Key 설정 방법과 실제 구글 지도를 띄우는 예제를 다룹니다.

 

---

✅ 1. Google Maps API 활성화 및 API Key 생성

 

Google Maps를 사용하려면 먼저 Google Cloud Console에서 API를 활성화하고 API Key를 생성해야 합니다.

 

1️⃣ Google Cloud Console에서 API 활성화

1. Google Cloud Console에 접속

2. 프로젝트 선택 또는 새 프로젝트 생성

3. API 및 서비스 → 사용자 인증 정보 → 사용자 인증 정보 만들기 → API 키 클릭

4. 생성된 API 키 복사 (AIza...로 시작하는 문자열)

5. API 및 서비스 → 라이브러리에서 아래 API 활성화

• Maps SDK for Android

• Maps SDK for iOS

 

---

✅ 2. Flutter 프로젝트에 Google Maps 패키지 추가

 

Flutter에서 구글 지도를 사용하려면 google_maps_flutter 패키지를 설치해야 합니다.

터미널에서 다음 명령어 실행:

flutter pub add google_maps_flutter

 

또는 pubspec.yaml에 직접 추가:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0

그리고 flutter pub get 실행하여 패키지를 다운로드합니다.

 

---

✅ 3. Android에서 API Key 설정

 

Android에서는 AndroidManifest.xml에 API Key를 추가해야 합니다.

 

📌 Android 설정 (AndroidManifest.xml)

 

📂 android/app/src/main/AndroidManifest.xml 파일을 열고, <application> 태그 내부에 다음을 추가:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="여기에_구글_API_키_입력" />

 

예제:

<manifest>
    <application>
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyD************" />
    </application>
</manifest>

 

✅ “여기에_구글_API_키_입력” 부분을 복사한 API Key로 변경하세요.

 

---

✅ 4. iOS에서 API Key 설정

 

iOS에서는 AppDelegate.swift에 API Key를 추가해야 합니다.

 

📌 iOS 설정 (AppDelegate.swift)

 

📂 ios/Runner/AppDelegate.swift 파일을 열고, 다음 코드를 추가:

import UIKit
import Flutter
import GoogleMaps  // ✅ GoogleMaps 라이브러리 추가

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("여기에_구글_API_키_입력")  // ✅ API 키 설정
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

 

✅ “여기에_구글_API_키_입력” 부분을 복사한 API Key로 변경하세요.

 

---

✅ 5. 구글 지도 표시하기 (Flutter 코드)

 

아래 코드를 실행하면 Flutter에서 Google Maps를 표시할 수 있습니다.

 

📌 lib/main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: GoogleMapScreen(),
    );
  }
}

class GoogleMapScreen extends StatefulWidget {
  const GoogleMapScreen({super.key});

  @override
  _GoogleMapScreenState createState() => _GoogleMapScreenState();
}

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

  final LatLng _initialPosition = const LatLng(37.7749, -122.4194); // 샌프란시스코 좌표 예시

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Maps in Flutter')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _initialPosition,
          zoom: 12.0,
        ),
      ),
    );
  }
}

 

✅ 이 코드를 실행하면 Google Maps가 화면에 표시됩니다.

 

---

✅ 6. 추가 기능 (마커 & 사용자 현재 위치 표시)

 

아래 코드를 추가하면 마커(marker)를 추가하고, 현재 위치를 표시할 수 있습니다.

 

📌 lib/google_map_screen.dart (마커 추가)

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

class GoogleMapScreen extends StatefulWidget {
  const GoogleMapScreen({super.key});

  @override
  _GoogleMapScreenState createState() => _GoogleMapScreenState();
}

class _GoogleMapScreenState extends State<GoogleMapScreen> {
  late GoogleMapController mapController;
  final LatLng _initialPosition = const LatLng(37.7749, -122.4194); // 샌프란시스코 좌표 예시

  final Set<Marker> _markers = {}; // ✅ 마커 목록

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    setState(() {
      _markers.add(
        Marker(
          markerId: const MarkerId("myMarker"),
          position: _initialPosition,
          infoWindow: const InfoWindow(
            title: "샌프란시스코",
            snippet: "캘리포니아, 미국",
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Maps with Marker')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _initialPosition,
          zoom: 12.0,
        ),
        markers: _markers, // ✅ 마커 추가
      ),
    );
  }
}