Flutter入門(5)　Google Mapを使ってみる(Web/android/iOS)

2022.01.24

FluuterからGoogle Map APIを呼び出してみます。
前提としてGoogleアカウントがあり、ログインしていること。

Google Maps Platform APIキーの取得

Google Cloud Platformを開き、「プロジェクトを作成」リンクを選択します。
プロジェクト名を入力して「作成」ボタンを選択します。

「→APIの概要に移動」を選択します。

「ライブラリ」を選択します。

「Maps JavaScript API」を選択します。

「有効にする」を選択します。

同様に「Maps SDK for Android」「Maps SDK for iOS」も有効にします。

「認証情報」を選択します。

「認証情報を作成」「APIキー」を選択します。
また、作成されたAPIキーに「APIキーの制限」を設定します。

キーを利用するAPIに適したキーの制限を行います。
キーの制限を行わずにAPIキーを利用した場合、外部にキー情報が洩れると悪意のあるユーザに利用されてしまう恐れがあるのでご注意下さい。
下記から適切な制限を選択して設定を保存して下さい。

  • HTTPリファラー（ウェブサイト）
    HTTP リファラーによる制限
  • IPアドレス（ウェブサーバー、crronジョブなど）
    IP アドレスによる制限
  • Androidアプリ
    パッケージ名およびフィンガープリントによる制限
  • iOSアプリ
    iOS バンドル識別子による制限

flutterプロジェクトを作成

$ flutter create --org jp.a12345 mymap

flutterプロジェクトにGoogle Mapパッケージを追加

flutterプロジェクトルートディレクトリにて以下のコマンドを実行します。

$ flutter pub add google_maps_flutter
$ flutter pub add google_maps_flutter_web

WebでのGoogle Map API設定

web/index.htmlに以下を追加します。

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script>

androidでのGoogle Map API設定

android/app/src/main/AndroidManifest.xml に以下を追加します。

<meta-data android:name="com.google.android.geo.API_KEY"
  android:value="MY_API_KEY"/>

また、以下を修正します。

minSdkVersion 20

iOSでのGoogle Map API設定

ios/Runner/AppDelegate.swift に以下を追加します。

import GoogleMaps

GMSServices.provideAPIKey("MY_API_KEY")

main.dartの編集

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

アプリのテスト

Web、android、iOSでそれぞれテストしてみます。

Webアプリ
Androidアプリ
IOSアプリ



コメント