구글 지도 api 써보기

구글 지도 api 써보기

 

의존성
  google_maps_flutter: ^2.12.3
  shared_preferences: ^2.5.3

 

임포트   
  import 'package:google_maps_flutter/google_maps_flutter.dart';
  import 'package:shared_preferences/shared_preferences.dart';
  

안드로이드 세팅
  
  gradle-wrapper.properties
  distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-all.zip
  
  settings.gradle
  plugins {
    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
    id "com.android.application" version "8.5.0" apply false
    id "org.jetbrains.kotlin.android" version "1.9.0" apply false
  }
  
  AndroidManifest.xml
<application
android:label="dem_google_map"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">

<meta-data android:name="cohttp://m.google.android.geo.API_KEY"
    android:value="키값"/>

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

class MapScreens extends StatefulWidget {
  const MapScreens({super.key});

  @override
  State<MapScreens> createState() => _MapScreensState();
}

class _MapScreensState extends State<MapScreens> {
  //구글맵 사용해보기 sdk 버전

  //먼저 지도를 조작하기 위한 리모콘 만들기
  GoogleMapController? _controller;

  //특정 위치로 부드럽게 이동
  //현재 줌 레벨 조정 1~20
  //1 화면에 중심 좌표 가져오기
  //2 중심좌표 객체 생성
  static const LatLng _initCenter = LatLng(35.1612, 129.0725);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue[200],
        foregroundColor: Colors.white,
        title: Text('처음 만나는 구글 맵스'),
        actions: [
          IconButton(
            onPressed: _showMarkerList,
            icon: Icon(Icons.list),
          ),
        ],
      ),
      //3 구글 맵스 위젯 사용
      //구글맵스는 지도의 모든 것을 담을 수 있는 그릇이다.
      body: GoogleMap(
        onMapCreated: (controller) {
          //controller 지도안에 생성된 구글컨트롤러
          //내 변수 _controller에 주소값 연결
          _controller = controller;
        },
        initialCameraPosition: CameraPosition(
          target: _initCenter,
          zoom: 15,
        ),
      ),
      bottomNavigationBar: Container(
        color: Colors.blue[200],
        child: Text(
          '마커된 장소 0개',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  //마커 목록 화면 표시 메서드
  void _showMarkerList()
   {
    ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('목록 화면은 다음 단계에서 구현할 예정'),
        )
    );
  }
}