[flutter] 플러터에서 구글 지도 사용하는 방법
플러터(Flutter) 앱에서 지도를 표시하려면 구글 지도를 사용할 수 있습니다. 이를 위해서는 몇 가지 단계를 따라야 합니다.
구글 클라우드 플랫폼(Google Cloud Platform) 설정
- Google Cloud Console에 로그인하여 새 프로젝트를 생성합니다.
- 좌측 네비게이션 바에서 “API 및 서비스” > “라이브러리”를 클릭합니다.
- “Google Maps JavaScript API”를 검색하고 활성화합니다.
- 좌측 네비게이션 바에서 “API 및 서비스” > “OAuth 동의 화면”을 클릭하여 애플리케이션 정보를 입력합니다.
안드로이드 설정
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"/>
android/app/build.gradle
파일의 dependencies에 구글 지도 플러그인을 추가합니다.
dependencies {
implementation 'com.google.android.gms:play-services-maps:<latest_version>'
}
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 설정
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>
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의 문서를 참고하시기 바랍니다.