Flutter에서 Google Map에 현재 내 위치 띄우기 예제

---

Google Map API 준비

https://console.cloud.google.com/

API 및 서비스 -> 사용자 인증 정보 -> 사용자 인증 정보 만들기 -> API 키 생성 후 키 설정

API Key 설정

간단한 Google Map 예제이므로 어플리케이션 제한사항, API 제한사항 없음으로 진행하겠습니다. 만약 상업적, 팀 프로젝트시 Android, IOS 각각 API KEY 생성후 그에 맞는 어플리케이션 제한사항과 API 제한 사항을 꼭 설정할 것!

AndroidManifest.xml

IOS API 설정

ios/Runner/AppDelegate.swift

---

Flutter 위젯 구현

Flutter 패키지 Location, google_maps_flutter 설치

https://pub.dev/packages/google_maps_flutter, https://pub.dev/packages/location

pubspec.yml 파일 코드 추가

location: ^3.2.1 # 현재 내위치
google_maps_flutter: ^1.0.10 # Google Map

코드

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

class GoogleMapPage extends StatefulWidget {
  String title;
  GoogleMapPage({this.title});

  @override
  _GoogleMapPageState createState() => _GoogleMapPageState();
}

class _GoogleMapPageState extends State<GoogleMapPage> {

  Location location;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    location = Location();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: location.getLocation(),
        builder: (BuildContext context, AsyncSnapshot<LocationData> _) {
          if(!_.hasData){ /// 현재 내 위치데이터값이 null경우 로딩 
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          return GoogleMap(
              initialCameraPosition: CameraPosition(
                  target: LatLng(_.data.latitude, _.data.longitude),
                  zoom: 16,
              ),
            onTap: (_){

            },
            myLocationEnabled: true,
            myLocationButtonEnabled: true,
            circles: Set.from([Circle(
              circleId: CircleId("location"),
              center: LatLng(_.data.latitude, _.data.longitude),
              strokeWidth: 1,
              //strokeColor: Colors.blue[200],
              radius: 500,
            )]),
          );
        },)
    );
  }
}