[Flutter] 플러터 Google Map API 활용

이전에 kakaomap_webview 패키지를 통해 지도를 구현해보았다.

kakaomap_webview 패키지를 통해 지도를 쉽게 구현할 수 있었지만 지도의 여러 가지 기능을 코드로 작성할 때 JavaScript를 사용해야 하는 경우가 있었다. 다른 방법이 없을까 알아보았지만 Kakao에서 webview 말고는 Flutter에 대응하는 카카오 맵 플러그인을 개발할 계획이 없다고 했다. JavaScript를 따로 배워서 코드를 작성하기보다 다른 지도 API를 활용하는 게 더 좋을 거 같다는 생각을 해서 다른 지도 API를 알아보았다.

그중에서 Flutter를 개발한 Google에 Map API를 활용해야겠다고 생각했다.  Google에 Map은 한국 한정으로 앱을 개발할 때 좋다고 생각하진 않지만 Flutter와 호환성이 좋지 않을까?라는 생각에 결정하게 되었다.

그럼 Flutter에서 Google Map API를 활용해보도록 하자.

Google Cloud Platform

Google Cloud Platform

구글 클라우드 플랫폼에 들어가 

프로젝트 만들기 > 새 프로젝트 > 프로젝트 이름을 정하고 만들기를 누른다.

(프로젝트가 원래 있던 사람은 프로젝트 선택 > 새 프로젝트 > 프로젝트 이름을 정하고 만들기를 누른다.)

프로젝트를 만들었으면 Maps API를 활성화하자.

검색창에 google maps platform을 입력해 하단에 google maps platform을 클릭한다.

google maps platform

Google Maps Platform에 들어가서 Maps SDK for Android를 클릭 후 사용 버튼을 누르고 Maps SDK for IOS를 클릭 후 사용 버튼을 누른다.

사용자 인증 정보

다음으로 사용자 인증 정보에 들어가게 되면 사용자 인증정보 만들기가 나온다.

사용자 인증정보 만들기 > API 키 > 키 제한을 누르게 되면 다음 이미지와 같은 창이 나온다.

API 키 제한

이름은 자신이 관리하기 편한 이름으로 작성하고 애플리케이션 제한사항은 android로 한다.

Android 앱의 사용량 제한에서 패키지 이름은 android > app > src > main > AndroidMainfest.xml 에 들어가서 package이름을 복사해 붙여 넣는다.

SHA1 인증서 디지털 지문은 오른쪽 디버그 인증서 디지털 지문을 cmd창에 작성해 나온  코드를 복사해 붙여 넣으면 된다.

ios 앱의 경우도 똑같이 진행하면 되고 패키지 이름의 경우 ios > Runner > Runner.xodeproj > project.pbxproj 에 들어가서 "PRODUCT_BUNDLE_IDENTIFIER"를 검색해 찾은 후 복사해서 붙여 넣으면 된다.

API 키

성공적으로 진행했다면 위에 그림과 같이 나올 것이다. 

옆에 적혀있는 키값은 코드를 작성할 때 쓰일 키값이다.

Google map api 키를 받았으므로 본격적으로 코드를 작성해보자.

Flutter app (Android)

androdi > app > src > main > AndroidMainfest.xml 에 다음 코드를 추가한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.google_map_test">
 	<!-- 위치 정보 엑세스 권한 요청 -->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 
    <application
        android:label="google_maps_flutter"
        android:icon="@mipmap/ic_launcher">
 
       <!-- TODO: Add your API key here -->
       <meta-data android:name="com.google.android.geo.API_KEY"
           android:value="YOUR KEY HERE"/> // android API Key
 
        <activity>...</activity>
    </application>
</manifest>

"YOUR KEY HEAR"에는 위에 자신의 android API Key 값을 작성한다.

Flutter app (IOS)

import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)
GMSServices.provideAPIKey("YOUR-KEY")
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}

android와 같이 "YOUR-KEY"에 ios API Key 키값을 작성한다.

ios의 경우도 위치 정보 액세스 권한 요청을 해야 한다.

ios > Runner > info.plist에 다음 코드를 추가한다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>The app needs location permission</string>

minSdkVersion 설정

android > app > build.gradle

위 경로에 따라서 들어가게 되면 하단에 minSdkVersion 이 보일 것이다.

sdk 최소 버전을 20으로 설정한다.

build.gradle

GoogleMap 패키지 추가

google_maps_flutter | Flutter Package

pubspec.yaml의 dependencies에 다음 코드를 작성한다.

google_maps_flutter: ^2.0.1

다음으로 예제 코드를 수행한다.

코드는 main.dart와 map_sample.dart에 작성하도록 하자.

main.dart

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapSample(),
    );
  }
}

map_sample.dart

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

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  // 초기 카메라 위치
  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  // 호수 위치
  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex, // 초기 카메라 위치
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),

      // floatingActionButton을 누르게 되면 _goToTheLake 실행된다.
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}

위 코드를 보게 되면 GoogleMap 위젯을 통해 구글 맵을 생성하고 floatingActionButton을 생성해 눌렀을 때 _goToTheLake 비동기 함수가 실행될 수 있게 했다.

모든 코드를 다 작성하고 실행하면 다음 영상과 같이 나오는 것을 확인할 수 있다.

참고

[Flutter]Google Map 사용하기

google_maps_flutter | Flutter Package

github

GitHub - junjange/Flutter-Learning: 플러터 학습