[Flutter] 구글맵 API 사용하기
Flutter

[Flutter] 구글맵 API 사용하기

728x90

1) Google Cloud Platform에서 프로젝트 만들기

https://console.developers.google.com/

 

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

▶ 프로젝트 만들기 클릭 -> 프로젝트 이름 정하고 생성

 

2) Maps API 활성화

▶ Google 지도 SDK를 추가

API 라이브러리

-> Maps SDK for Android 클릭 -> 사용 누르기

->Maps SDK for IOS SDK 클릭 -> 사용 누르기

 

3) API 키 생성 및 제한

▶사용자 인증정보-> 사용자 인증정보 만들기 -> API 키 -> 키 제한

- android: 패키지명 + SHA1 입력

1
2
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
 cs

- ios: 패키지명 입력

android ios api 생성

4) Flutter 앱에 Google지도 추가 (Android)

▶ android/app/src/main/AndroidManifest.xml에 추가

: your key here에 자신의 키 넣기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.pinkesh.google_maps_flutter">
 
    <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"/>
 
        <activity>...</activity>
    </application>
</manifest>
 cs

 

5) Flutter 앱에 Google지도 추가 (IOS)

▶ ios/Runner/AppDelegate.swift 파일에 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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)
}
}
 cs

▶ ios/Runner/info.plist에 소스 추가

1
2
<key>NSLocationWhenInUseUsageDescription</key>
<string>The app needs location permission</string>
 cs

 

6) GoogleMap 위젯 추가

▶ pubspec.yaml google_maps_flutter 플러그인 추가

1
2
3
4
5
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: 1.0.0
  google_maps_flutter: ^2.0.1
 cs

 

7) 예제 코드 실행 해보기

※ 중간에 에러 발생

-> gradle(app) : minSdkVersion 16->20으로 수정

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import 'dart:async';
 
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
 
void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('GoogleMap'),
      ),
      body: MapSample(),
    ),
  ),
  );
}
 
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: 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));
  }
}
 cs

 

실행 결과

 

[참고 사이트]

https://blog.logrocket.com/adding-google-maps-to-a-flutter-app/

https://kyungsnim.net/128

https://m.blog.naver.com/PostView.naver?blogId=lmj_java&logNo=222018015460&proxyReferer=https:%2F%2Fwww.google.com%2F 

728x90

'Flutter' 카테고리의 다른 글

[Flutter] 현재 위치 가져오기 + 마커 찍기  (0) 2021.05.25
[Flutter] 구글맵 API 사용하기-2  (0) 2021.05.25
[Flutter_study] Section 7 review  (0) 2021.05.23
[Flutter_study] Section 6 review  (0) 2021.05.18
[Flutter_study] Section 5~6 review  (0) 2021.05.18

    티스토리툴바