狐好きぷろぐらまー

狐好きプログラマーのブログです。

トップ > Flutter > 【Flutter】Google Mapのサンプルを動かそうとしたら躓いた【google_maps_flutter】

【Flutter】Google Mapのサンプルを動かそうとしたら躓いた【google_maps_flutter】

Flutter Dart

こんにちは。 pregum_foxです。

今回は、FlutterでGoogle Mapsプラグインを試してみたときに躓いた所をメモしておきます。

目次です。

概要

簡単に概要を記載しますと、

  1. FlutterでGoogle Mapを表示させるために、Google MapsプラグインのサンプルをAVDで動かした。
  2. 起動はしたが、Google Mapは表示されず、<アプリケーション名> won't run unless you update Google Play services.と表示された。
  3. SDK ManagerでGoogle APIs Intel x86 Atom System Imageを導入後、作成したAVDを使用した。
  4. Google Play servicesのアップデートが始まり、その後サンプルを起動すると、無事Google Mapが表示された。

動作環境

項目 バージョン
Flutter 1.7.8+hotfix.4
Dart 2.4.0
開発用OS Windows 10
AVDのVersion 7.1.1(Nougat) 
PS C:\Users\XXX\XXX\XXX\Flutter\api_practice> flutter --version
Flutter 1.7.8+hotfix.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 20e59316b8 (7 weeks ago) • 2019-07-18 20:04:33 -0700
Engine • revision fee001c93f
Tools • Dart 2.4.0

躓いたところ

こちらの記事を参考にGoogle Mapsプラグインのサンプルを触っていた所

以下のような画面が表示され、Google Mapが表示されませんでした。

f:id:pregum_fox:20190904014415p:plain
問題発生時の画面

原因

作成したAVDのGoogle Play servicesのVersionが古いのが原因でした。

参考サイト : Android - ogle Map API Demo won't run unless you update Google Play servicesエラー｜teratail

対処方法

以下の操作を行うと表示されるようになりました。

  1. Android StudioのSDK ManagerでSDK Platformタブで対象OSのバージョンのGoogle APIs Intel x86 Atom_64 System Imageの項目を追加する。
  2. AVDを作成する。
  3. 起動後Google Playを起動しアップデートされるまで待つ。
  4. アップデート後、Google Play servicesのバージョンを確認し、バージョンが上がっていることを確認する。
  5. Google Mapsプラグインのサンプルを起動し、Google Mapが表示されていることを確認。 ※サンプル初回起動時に以下のようなポップアップが表示される場合がありますが、私はACCEPTをタップしました。

f:id:pregum_fox:20190904014054p:plain
サンプル初回起動時のポップアップ

検証方法

  1. 初めにAndroid Studio上でSDK Managerを開いて、SDK Platformタブで問題発生時の設定環境を確認しました。
    AVDのVersionは7.1.1で試しました。
    その時の設定画面は以下の通りです。

    f:id:pregum_fox:20190904013229p:plain
    問題発生時のSDK Managerの設定

  2. その状態で一度AVDを作成と起動を行い、その状態ではGoogle Mapが表示されない事を確認しました。

f:id:pregum_fox:20190904013320p:plain
問題発生時のGoogle Mapサンプル起動状態

  1. この時のGoogle Play servicesのVersionは10.2.98でした。

f:id:pregum_fox:20190904013513p:plain
Google Play servicesのVersion

  1. 再度SDK Managerを開いて、SDK Platformタブの設定でGoogle APIs Intel x86 Atom_64 System Imageの項目を追加しました。
    その時の設定画面は以下の通りです。

f:id:pregum_fox:20190904013601p:plain
Google APIs項目追加

  1. AVDを作成、起動しPlay Storeを起動しアップデートが開始される事を確認し、アップデート後Google Play servicesのVersionがアップデートされている事を確認しました。

f:id:pregum_fox:20190904013728p:plain
Google Play起動直後の画面

f:id:pregum_fox:20190904013800p:plain
アップデート後のGoogle Play servicesのVersion

  1. このままGoogle Mapsプラグインのサンプルを起動し、Google Mapが表示される事を確認しました。

f:id:pregum_fox:20190904013848p:plain
Google Map表示成功

雑感

Google Mapのサンプルを触ろうと思っただけですが、build.gradleや端末側の問題があったりして一度Androidを体系的に学んだ方が、こうしたFlutter周りの問題は素早く解決できるかなと思いました。

読んで頂きありがとうございました。

参考サイト