Flutterの位置情報取得・マップ連携を初心者向けに解説！地図アプリを作ろう
生徒
「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は非常に強力な組み合わせで、多くの実用アプリに応用できます。
この記事を読んだ人からの質問
