🌏

FlutterでGoogle Mapsを表示する

2021/05/07に公開

省略のためiOS版のみ記述します。Android対応は公式ドキュメントをご覧ください。

  1. Googleマップを使うためにAPIキーを取得 (https://cloud.google.com/maps-platform/)
     取得できると以下のように表示されます。

  2. ios/Runner/AppDelegate.swift を変更
     YOUR KEY HERE には先ほど取得したAPIキーを入れます。

    ios/Runner/AppDelegate.swift
    import 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)
      }
    }
    
  3. pubspec.yaml に追記し、flutter pub getを実行
     最新バージョンはこちら

    pubspec.yaml
    dependencies:
      google_maps_flutter: ^2.0.3     # <- これ
    
  4. lib/main.dart を書き換える
     以下のように変えると、Googleマップが表示されるでしょう。初期地点は東京駅にしてみました。

    lib/main.dart
    import '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