先生と生徒の会話形式で理解しよう

生徒

「Flutterでスマホの現在地を取得して、Google Mapsに表示させたいんですけど、どうやればいいですか？」

先生

「Flutterでは位置情報を取得するためにgeolocator、マップ表示にはgoogle_maps_flutterというパッケージを使います。それぞれを組み合わせれば、現在地を地図上に表示できますよ。」

生徒

「地図にピンを立てたり、移動させることもできますか？」

先生

「はい、もちろん可能です。それではFlutterで位置情報とGoogle Mapsを連携する手順を解説していきましょう。」

1. Flutterで位置情報を取得するには？

Flutterでスマホの現在地を取得するには、geolocatorパッケージが便利です。まずはpubspec.yamlに以下を追加しましょう。


dependencies:
  geolocator: ^10.1.0

次に、AndroidとiOSの両方で位置情報取得に必要なパーミッションを設定します。

Androidの設定

android/app/src/main/AndroidManifest.xmlに次の権限を追加します。


<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

iOSの設定

ios/Runner/Info.plistに以下のキーを追加してください。


<key>NSLocationWhenInUseUsageDescription</key>
<string>現在地を取得するために位置情報を使用します。</string>

2. 現在地を取得するFlutterコード

位置情報を取得するには、以下のようなコードを使用します。非同期処理を含むため、async/awaitを活用します。


import 'package:geolocator/geolocator.dart';

Future<Position> getCurrentPosition() async {
  bool serviceEnabled;
  LocationPermission permission;

  serviceEnabled = await Geolocator.isLocationServiceEnabled();
  if (!serviceEnabled) {
    return Future.error('位置情報サービスが無効です');
  }

  permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied) {
    permission = await Geolocator.requestPermission();
    if (permission == LocationPermission.denied) {
      return Future.error('位置情報のパーミッションが拒否されました');
    }
  }

  return await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high,
  );
}

このコードでは、サービスの有効確認とパーミッションチェックを行い、安全に現在地を取得しています。

3. Google Mapsを表示するFlutterの設定

位置情報と連携するためには、地図の表示が必要です。Flutterで地図を表示するにはgoogle_maps_flutterパッケージを使います。

pubspec.yamlに追加します。


dependencies:
  google_maps_flutter: ^2.5.0

AndroidとiOSにはそれぞれAPIキーの設定が必要です。Google Cloud ConsoleでAPIキーを取得し、以下のように設定してください。

Android


<meta-data android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

iOS


GMSServices.provideAPIKey("YOUR_API_KEY")

Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、定番の実践書がこちらです。

Flutter実践開発をAmazonで見る

※ Amazon広告リンク

4. 現在地を地図上に表示するFlutterコード

現在地を取得して、Google Maps上にピンを立てて表示するには、次のようにコードを構成します。


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

class CurrentLocationMap extends StatefulWidget {
  @override
  _CurrentLocationMapState createState() => _CurrentLocationMapState();
}

class _CurrentLocationMapState extends State<CurrentLocationMap> {
  late GoogleMapController _mapController;
  LatLng _currentPosition = LatLng(0, 0);
  Set<Marker> _markers = {};

  @override
  void initState() {
    super.initState();
    _setCurrentLocation();
  }

  Future<void> _setCurrentLocation() async {
    Position position = await getCurrentPosition();
    setState(() {
      _currentPosition = LatLng(position.latitude, position.longitude);
      _markers.add(Marker(
        markerId: MarkerId('currentLocation'),
        position: _currentPosition,
        infoWindow: InfoWindow(title: '現在地'),
      ));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('現在地を地図に表示')),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: _currentPosition,
          zoom: 16,
        ),
        markers: _markers,
        onMapCreated: (controller) => _mapController = controller,
        myLocationEnabled: true,
      ),
    );
  }
}

これで、ユーザーの現在地を中心としたGoogle MapsがFlutterアプリ上に表示され、ピンも自動で立ちます。

5. Flutterの位置情報とマップ連携の応用

Flutterで位置情報を取得してGoogle Mapsと連携すれば、以下のようなアプリ開発が可能になります。

現在地から目的地までのナビゲーションアプリ
近くの店舗やスポット検索アプリ
位置を登録して記録するライフログアプリ
ランニングや移動履歴を追跡するGPSアプリ

位置情報とGoogle Mapsは非常に強力な組み合わせで、多くの実用アプリに応用できます。

Flutterの位置情報取得・マップ連携を初心者向けに解説！地図アプリを作ろう