[flutter] 플러터에서 구글 지도 사용하는 방법

플러터(Flutter) 앱에서 지도를 표시하려면 구글 지도를 사용할 수 있습니다. 이를 위해서는 몇 가지 단계를 따라야 합니다.

구글 클라우드 플랫폼(Google Cloud Platform) 설정

  1. Google Cloud Console에 로그인하여 새 프로젝트를 생성합니다.
  2. 좌측 네비게이션 바에서 “API 및 서비스” > “라이브러리”를 클릭합니다.
  3. “Google Maps JavaScript API”를 검색하고 활성화합니다.
  4. 좌측 네비게이션 바에서 “API 및 서비스” > “OAuth 동의 화면”을 클릭하여 애플리케이션 정보를 입력합니다.

안드로이드 설정

  1. android/app/src/main/AndroidManifest.xml 파일에 다음 권한을 추가합니다.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  1. android/app/build.gradle 파일의 dependencies에 구글 지도 플러그인을 추가합니다.
dependencies {
    implementation 'com.google.android.gms:play-services-maps:<latest_version>'
}
  1. android/app/src/main/AndroidManifest.xml 파일에 meta-data를 추가하여 API 키를 등록합니다.
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="your_api_key_here"/>

iOS 설정

  1. ios/Runner/Info.plist 파일에 권한을 추가합니다.
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
  1. ios/Runner/Info.plist 파일에 API 키를 추가합니다.
<key>GOOGLE_MAPS_API_KEY</key>
<string>your_api_key_here</string>

플러터 앱에서 지도 사용

이제 구글 지도를 사용하여 플러터 앱에 지도를 추가할 수 있습니다. 다음은 간단한 코드 예제입니다.

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: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Example'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(37.7749, -122.4194),
            zoom: 12,
          ),
        ),
      ),
    );
  }
}

위 코드는 google_maps_flutter 패키지를 사용하여 간단한 지도를 표시합니다.

구글 지도를 플러터 앱에 통합하는 방법에 대한 간략한 설명입니다. 상세한 내용은 Google Maps Flutter package의 문서를 참고하시기 바랍니다.