[Flutter] 플러터 Google Map API 활용 예제(마커 추가, zoom)

이전에 Flutter에서 Google Map API를 활용해보았다.

Flutter에서 Google Map API를 활용하는 방법에 대해서 궁금한 점이 있다면 다음 링크를 통해 알아보고 오면 좋을 것 같다.

[Flutter] 플러터 Google Map API 활용

이번에는 Google Map API의 간단한 예제 코드 2개를 리뷰해보면서 구현해보자.

이번 예제 코드도 main.dart와 map_sample.dart를 통해 이루어져 있으며 main.dart에 코드는 고정적으로 두고 map_sample.dart에 코드만을 수정하면서 예제 코드를 구현해보자.

main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapSample(),
    );
  }
}

map_sample.dart

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

class MapSample extends StatefulWidget {
  late final String title;

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

class _MapSampleState extends State<MapSample> {
  // 애플리케이션에서 지도를 이동하기 위한 컨트롤러
  late GoogleMapController _controller;

  // 이 값은 지도가 시작될 때 첫 번째 위치입니다.
  final CameraPosition _initialPosition =
      CameraPosition(target: LatLng(41.017901, 28.847953));

  // 지도 클릭 시 표시할 장소에 대한 마커 목록
  final List<Marker> markers = [];

  addMarker(cordinate) {
    int id = Random().nextInt(100);

    setState(() {
      markers
          .add(Marker(position: cordinate, markerId: MarkerId(id.toString())));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GoogleMap(
          initialCameraPosition: _initialPosition,
          mapType: MapType.normal,
          onMapCreated: (controller) {
            setState(() {
              _controller = controller;
            });
          },
          markers: markers.toSet(),

          // 클릭한 위치가 중앙에 표시
          onTap: (cordinate) {
            _controller.animateCamera(CameraUpdate.newLatLng(cordinate));
            addMarker(cordinate);
          },
        ),

        // floatingActionButton 클릭시 줌 아웃
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            _controller.animateCamera(CameraUpdate.zoomOut());
          },
          child: Icon(Icons.zoom_out),
        ));
  }
}

위 코드는 클릭한 위치가 중앙에 표시되며 마커가 추가되는 코드이다.

모든 코드를 작성 후 실행하면 다음 영상과 같이 실행되는 것을 확인할 수 있다.

map_sample.dart

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

class MapSample extends StatefulWidget {
  @override
  _MapSampleState createState() => _MapSampleState();
}
 
class _MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  // 이 값은 지도가 시작될 때 첫 번째 위치입니다.
  CameraPosition _currentPosition = CameraPosition(
    target: LatLng(13.0827, 80.2707), 
    zoom: 12, //확대
  );
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Maps"),
      ),
      body: Container(
        height: double.infinity,
        width: double.infinity,
        child: GoogleMap(
          initialCameraPosition: _currentPosition,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete();
          },
        ),
      ),
    );
  }
}

main.dart는 처음 예제 코드와 같고 위 코드는 zoom in과 zoom out이 가능하게 한 예제 코드이다.

위 코드를 모두 작성 후 실행하면 다음 영상과 같이 실행되는 것을 확인할 수 있다.

참고

Display Google Maps in Flutter with Example - Quick Tutorial - codesundar

google_maps_flutter | Flutter Package