🌏

FlutterでGoogle Mapsを表示する

2021/05/07に公開

Flutter

googlemaps

googleマップ

tech

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

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

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)
  }
}

pubspec.yaml に追記し、flutter pub getを実行
　最新バージョンはこちら
pubspec.yaml
```
dependencies:
  google_maps_flutter: ^2.0.3     # <- これ
```

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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
	child: GoogleMap(
	  initialCameraPosition: CameraPosition(
	    target: LatLng(35.68131292899063, 139.76717584669254),
	    zoom: 15,
	  ),
	),
      ),
    );
  }
}

FlutterでGoogle Mapsを表示する

実行結果

Discussion