Zenn
📌

「google_maps_flutter」パッケージで地図を簡単表示してみる

2023/07/10に公開
Flutter
geolocator
googlemapsflutter
tech

必要パッケージをインストール

「google_maps_flutter」パッケージを活用すれば、画面上に地図を表示することは可能です。
アプリの初期表示の時点でユーザーの現在地を表示するように実装していきます。

そのため、下記のパッケージをそれぞれインストールしていきます。
​
https://pub.dev/packages/google_maps_flutter
https://pub.dev/packages/geolocator
​

「google_maps_flutter」利用のためにAPIキーを取得する

この記事ではAPIキーの取得方法については割愛します。
私は下記サイトを参考にキーを取得しました。
https://www.kentosjpn.com/programming/14/#toc1

実装例

下記にコードを記載。

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

class MapPage extends StatefulWidget {
  const MapPage({Key? key, required String title}) : super(key: key);
  @override
  _MapBody createState() => _MapBody();
}

class _MapBody extends State<MapPage> {
  Completer<GoogleMapController> _controller = Completer();

  late LatLng _initialPosition;
  late bool _loading;

  @override
  void initState() {
    super.initState();
    _loading = true;
    _getUserLocation();
  }

  void _getUserLocation() async {
    // 権限を取得
    LocationPermission permission = await Geolocator.requestPermission();
    // 権限がない場合は戻る
    if (permission == LocationPermission.denied ||
        permission == LocationPermission.deniedForever) {
      print('位置情報取得の権限がありません');
      return;
    }
    // 位置情報を取得
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    setState(() {
      _initialPosition = LatLng(position.latitude, position.longitude);
      _loading = false;
      print(position);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : SafeArea(
              child: Stack(
                fit: StackFit.expand,
                children: [
                  GoogleMap(
                    initialCameraPosition: CameraPosition(
                      target: _initialPosition,
                      zoom: 14.4746,
                    ),
                    onMapCreated: (GoogleMapController controller) {
                      _controller.complete(controller);
                    },
                    // markers: _createMarker(),
                    myLocationEnabled: true,
                    myLocationButtonEnabled: true,
                    mapToolbarEnabled: false,
                    buildingsEnabled: true,
                    onTap: (LatLng latLang) {
                      print('Clicked: $latLang');
                    },
                  ),
                ],
              ),
            ),
    );
  }
}

まとめ

(最後にソッといいねボタンやバッジを贈るボタンを押して頂けたら幸いですm(_ _)m)

Discussion