[플러터] Google Maps 구현

 

구글 맵은 구글이 제공하는 지도 서비스입니다. 다른 오픈 API처럼 인증키를 발급받아 호출하는 방식으로 이용합니다. 구글 맵 서비스는 구글 클라우드 플랫폼이라는 사이트에서 관리합니다.

 

1. 구글 맵 API 키 얻기

https://cloud.google.com/maps-platform 에 접속해 <Get Started>를 클릭합니다.

로그인이 되어 있지 않으면 구글 아이디로 로그인 합니다.

결제 계정이 필요한데요

혹시 너무 많이 쓰다가 요금폭탄 맞는거 아니야?! 라고 하실 수 있겠습니다만

월 사용료에서 처음 $200는 무료이지만, 사용한 요금이 무료 크레딧을 초과하는 경우에 대비하여 모든 Google Maps Platform 서비스에 신용카드 및 결제 계좌가 필요합니다. 요금이 청구될 때 월 사용료 중 처음 $200에 대해서는 무료 크레딧이 적용됩니다.

매월 200$ 치 만큼 무료로 사용할 수 있는데다가,

지도API 만 봤을때

• Static Maps

• Dynamic Maps

위의 2가지 기능을 많이 쓰게 될텐데

모바일용은 아예 무료라고 하니 안심해도 될 것 같습니다.

자세한 바는 cloud.google.com/maps-platform/pricing 에서 확인할 수 있습니다.

구글이 안내하는 대로 결제계정을 만듭시다.

이후에 입력하라고 하는거 적당히 입력하면 API를 아래처럼 줍니다.

<데모 빌드> 누르고 사용 설정을 완료합니다.

 

혹시 API 키가 탈취당하면 다른 사람이 API 키로 어뷰징을 시도할 수 있을텐데요,

구글은 친절하게도 api의 사용 범위를 제한할 수 있습니다.

위처럼 사용할 패키지 및 앱의 SHA-1 인증서를 입력할 수 있습니다.

SHA-1 인증서를 확인할 수 있는 방법은

(프로젝트 위치) 
$ cd android 
$ gradlew signingReport

위의 커맨드를 입력하면

위 캡쳐처럼 SHA1 값을 얻을 수 있습니다.

이 값을 복사해서 붙여넣기로 입력하면 됩니다.

 

2. 지도 표시하기

앞서 구글 맵 플랫폼 사용 설정을 마쳤으니 앱에 지도를 표시해봅시다.

(환경은 android - flutter입니다.)

 

• pubspec.yaml

dependencies: 	
  google_maps_flutter: ^2.0.11

구글 맵 패키지를 추가합니다.

 

• android/app/src/main/AndroidManifest.xml

      <meta-data
           android:name="com.google.android.geo.API_KEY"
           android:value="{구글 맵 API KEY}"
           />
    </application>
</manifest>

메니패스트 파일에 구글맵 API 키를 위와 같이 등록합니다.

 

• main.dart

https://pub.dev/packages/google_maps_flutter

패키지 예제를 그대로 구현해봅시다.

import 'dart:async';

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Google Maps Demo',
      home: 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));
  }
}

 

잘 나옵니다.

끝.

 

(* 혹시 잘 안나온다면 API 권한 제어를 체크해보시길 바랍니다. SHA1 인증 입력한 부분)