【Flutter】iOS/Android/WebでGoogleMapを表示する

# はじめに
昨年後半よりFlutter入門して社内用アプリを作っていたけど、Webで地図表示したい！って思い、トライしてみた。

ぶっちゃけ、パッケージのReadmeをそのままやっただけですが....

# 更新履歴
2021.2.8 初回投稿
2021.5.7 Flutterバージョンアップに伴い一部修正
2021.8.7 最小SDKバージョンを変更を追加
2022.2.10 最小SDKバージョンを21に変更

# 環境(2022.02.10現在)
- Flutter (Channel stable, 2.10.0, on macOS 11.6 20G165 darwin-x64, locale
    ja-JP)
- Android toolchain - develop for Android devices (Android SDK version 31.0.0)
- Xcode - develop for iOS and macOS (Xcode 13.2.1)
- Chrome - develop for the web
- Android Studio (version 2021.1)
- VS Code (version 1.64.1)

# 準備
~~- FlutterのChannelをbetaにしておくこと~~
Flutter2.0から不要になりました。stableのままでWebを使えるようになりました。
(2021.5.7追記)
- GoogleMapAPIキーを取得しておくこと

# やりたいこと
1.iOSでもAndroidでもWeb(Chrome)でもGoogleMapを表示させたい

# 実装手順
1. パッケージインストール(2022.02.10現在)

https://pub.dev/packages/google_maps_flutter

https://pub.dev/packages/google_maps_flutter_web

```pubspec.yaml
dependencies:
  google_maps_flutter: ^2.1.1
  google_maps_flutter_web: ^0.3.2+1
```

2.Web設定
headタグ内に以下のように追加

```lib/web/index.html
<head>

  <!-- // Other stuff -->

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>//←ここを追加
</head>
```

3.iOS設定

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

4.Android設定

```android/app/src/main/AndroidManifes.xml
<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/> //←追加(application直下)
```

 最小SDKバージョンを変更

```android/app/build.gradle
minSdkVersion 21 //21以上に変更
```

5.Flutter実装

```lib/main.dart
import 'dart:async';

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Maps Demo',
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  static final CameraPosition _kLake = CameraPosition(
      bearing: 192.8334901395799,
      target: LatLng(37.43296265331129, -122.08832357078792),
      tilt: 59.440717697143555,
      zoom: 19.151926040649414);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: GoogleMap(
        mapType: MapType.hybrid,
        initialCameraPosition: _kGooglePlex,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: _goToTheLake,
        label: Text('To the lake!'),
        icon: Icon(Icons.directions_boat),
      ),
    );
  }

  Future<void> _goToTheLake() async {
    final GoogleMapController controller = await _controller.future;
   controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
  }
}
```

これでiOSでもAndroidでもWebでもGoogleMapが見られるようになりました。

![スクリーンショット 2021-02-08 10.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/757507bf-f5d9-c78a-0fae-5416fa069498.png)

参考
・ https://pub.dev/packages/google_maps_flutter/install
・ https://pub.dev/packages/google_maps_flutter
・ https://pub.dev/packages/google_maps_flutter_web/install

動作画面
・Web
![スクリーンショット 2021-02-08 10.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/ab122f99-b596-96cf-1660-99ecf30b0ce4.png)

・iOS
![スクリーンショット 2021-02-08 10.42.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/eff7b4d1-3fb4-9a87-ea05-4984991e67c5.png)

・Android
![Screenshot_1612748636.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/9961/c2844bca-3b0b-b718-517a-092c3a0e6137.png)


## サンプルソースコード
https://qiita.com/yoshikoba/items/e4c8eae14735e7304902

以上