Flutter(플러터) 구글 맵 사용 해서 위젯 만들기

Flutter(플러터) 구글 맵 사용  해서 위젯 만들기

1. google_maps_flutter_web 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일에 아래 코드를 추가합니다. 또는 flutter pub add google_maps_flutter_web

dependencies:
  google_maps_flutter_web: ^0.2.0

2.google_maps_flutter_web 패키지에서 제공하는 GoogleMap 위젯을 사용하여 지도를 표시합니다.

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

class MapWidget extends StatefulWidget {
  @override
  _MapWidgetState createState() => _MapWidgetState();
}

class _MapWidgetState extends State<MapWidget> {
  GoogleMapController? _controller;

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: (controller) {
        _controller = controller;
      },
      initialCameraPosition: CameraPosition(
        target: LatLng(31.5555, 111.3333), // 초기 지도 위치
        zoom: 15.0, // 초기 줌 레벨
      ),
      myLocationEnabled: true, // 현재 위치 보기 활성화
      markers: _buildMarkers(), // 마커 추가
    );
  }

  Set<Marker> _buildMarkers() {
    // 현재 위치에 마커 추가
    return {
      Marker(
        markerId: MarkerId('current_location'),
        position: LatLng(31.5555, 111.3333), // 현재 위치 (임시 값)
        infoWindow: InfoWindow(title: '현재 위치'),
      ),
    };
  }
}

위 코드에서는 GoogleMap 위젯을 사용하여 지도를 표시하고, myLocationEnabled 속성을 true로 설정하여 현재 위치 보기를 활성화합니다. 또한 _buildMarkers() 함수에서 현재 위치에 마커를 추가합니다. 이 코드에서는 임시 값으로 LatLng(37.5665, 126.9780)을 사용하였습니다.

이제, MapWidget 위젯을 다른 화면에서 사용할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Demo'),
        ),
        body: MapWidget(),
      ),
    );
  }
}

위 코드에서는 MapWidget을 Scaffold 위젯의 body 속성으로 사용합니다. 이제 앱을 실행하면, 현재 위치를 보여주는 지도가 표시됩니다.