🌏
FlutterでGoogle Mapsを表示する
省略のためiOS版のみ記述します。Android対応は公式ドキュメントをご覧ください。
-
Googleマップを使うためにAPIキーを取得 (https://cloud.google.com/maps-platform/)
取得できると以下のように表示されます。
-
ios/Runner/AppDelegate.swift を変更
YOUR KEY HERE には先ほど取得したAPIキーを入れます。ios/Runner/AppDelegate.swiftimport UIKit import Flutter import GoogleMaps // <- ここと @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GMSServices.provideAPIKey("YOUR KEY HERE") // <- ここ GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } }
-
pubspec.yaml に追記し、
flutter pub get
を実行
最新バージョンはこちらpubspec.yamldependencies: google_maps_flutter: ^2.0.3 # <- これ
-
lib/main.dart を書き換える
以下のように変えると、Googleマップが表示されるでしょう。初期地点は東京駅にしてみました。lib/main.dartimport 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; void main() async { runApp(MyApp()); } class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { Widget build(BuildContext context) { return Scaffold( body: Center( child: GoogleMap( initialCameraPosition: CameraPosition( target: LatLng(35.68131292899063, 139.76717584669254), zoom: 15, ), ), ), ); } }
Discussion