[flutter] 플러터(Flutter)와 지도 라이브러리 연동

18 Dec 2023

flutter

플러터(Flutter)를 사용하여 지도 기능을 통합하는 방법에 대해 알아보겠습니다.

1. 구글 맵스 API 키 발급

먼저, Google Cloud Console에 접속하여 프로젝트를 생성하고 구글 맵스 API 키를 발급받아야 합니다. 발급받은 API 키는 나중에 애플리케이션에서 사용하게 됩니다.

2. 지도 관련 플러그인 추가

google_maps_flutter 플러그인을 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^1.2.0

이후, flutter pub get 명령어를 실행하여 플러그인을 설치합니다.

3. 지도 위젯 추가

원하는 화면에 GoogleMap 위젯을 추가하여 API 키를 전달합니다.

import 'package:google_maps_flutter/google_maps_flutter.dart';

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 10,
  ),
  markers: Set<Marker>.of([
    Marker(
      markerId: MarkerId('marker_1'),
      position: LatLng(37.7749, -122.4194),
      infoWindow: InfoWindow(
        title: 'San Francisco',
        snippet: 'An Interesting city',
      ),
    ),
  ]),
)

4. API 키 설정

애플리케이션의 AndroidManifest.xml 파일과 Info.plist 파일에 구글 맵스 API 키를 설정합니다.

AndroidManifest.xml 파일에 아래의 코드를 추가합니다.

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_API_KEY_HERE"/>

Info.plist 파일에 아래의 코드를 추가합니다.

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app requires access to your location for the map</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app requires access to your location for the map</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

이제 애플리케이션을 실행하여 지도를 표시하고, 추가적인 기능 및 설정을 적용할 수 있습니다.

이상으로, 플러터(Flutter)와 지도 라이브러리를 연동하는 방법에 대해 살펴보았습니다.