FlutterでGoogleMapsを使い地図表示。google_maps_flutter (Ver.2.1.1)

過去記事で、地図アプリをメインで色々作ってたのもあり、Flutterでも、地図アプリを作ってみました。

Qiitaや、その他サイトでも、google_maps_flutter 関連の記事は結構ありますが、古い情報も多いので、2022/1/15時点のバージョンである、google_maps_flutter (Ver.2.1.1)の動作検証を含めてやってみます。

とりあえず、公式サイトの情報を参考にサンプルを動かすまで。

https://pub.dev/packages/google_maps_flutter



#パッケージ導入

「google_maps_flutter: ^2.1.1」を追加。

```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  google_maps_flutter: ^2.1.1
```

Pub getをクリック
![イメージ7565.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/574e4520-e9a7-840f-f946-15b9ae8bde10.jpeg)

#コードを追加

AndroidManifest.xmlにGoogleMapsAPI用のタグ追加

```xml:AndroidManifest.xml
       <meta-data
           android:name="com.google.android.geo.API_KEY"
           android:value="(APIキー)" />
       />
```

```gradle:build.gradle
    defaultConfig {
....
        minSdkVersion 20

````

```dart: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));
  }
}
```


#ERROR: Target of URI doesn't exist: 'package:google_maps_flutter/google_maps_flutter.dart'.

android studioの再起動で、直るようです。

https://stackoverflow.com/questions/44909653/visual-studio-code-target-of-uri-doesnt-exist-packageflutter-material-dart


#実行

![イメージ7566.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/503948/df4f3b1a-f1d0-ac27-4fad-b570f727dc24.jpeg)


今朝、MACにもFlutter環境を作り、実機のiPhone11でテストしてみましたが無事動きました。



#参考サイト

https://qiita.com/akeome/items/0a6ebf3af402fdf62c79

https://kenpos.dev/2021/05/20/post-571/571/

https://www.nskint.co.jp/2021/06/30/google_flutter_column_2/

https://qiita.com/aoinakanishi/items/25f2526fc7c1fe8350c6