素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【Google Maps Platform】FlutterでGoogleMapAPIを使う方法【iOS/Android】

投稿日:

スポンサーリンク

336×280




FlutterでGoogleMapを表示してみよう

前回、Flutterアプリの開発環境構築についてご紹介しました。

今回は、GoogleMapAPIを使って地図を表示するところまで試してみようと思います。

手順

前提

Google Maps PlatformのAPIキーは取得済みであるとします。

¥

pubspec.yamlに依存関係にgoogle_maps_flutterを追加

まずはpubspec.yamlにGoogleMapsライブラリの依存関係を追加しましょう。

APIキーの追記

Android

次に、android/app/src/main/AndroidManifest.xmlにAPIキーを追記してください。

iOS

iOSの場合は、まずios/Runner/Info.plistに以下を追記してください。

次に、ios/Runner/AppDelegate.swiftに以下を追記してください。

lib/main.dartの修正

設定は終わったので実際にmain.dartに手を加えてみましょう。

今回は以下の公式が紹介しているソースを元に手を加えてみました。

Developers Preview Status #
The plugin relies on Flutter’s new mechanism for embedding Android and iOS views. As that mechanism is currently in a developers preview, this plugin should also be considered a developers preview.google_maps_flutter | Flutter Package

確認

では、実際にflutter runで起動してみましょう。

Android

起動時の位置、ボタン押下時のカメラ移動含め問題無く動きました♪

iOS

こちらも起動時の位置、ボタン押下時のカメラ移動含め問題無く動きました♪

本日のオススメ商品

終わりに

以上のように、簡単にFlutterアプリにGoogleMapPlatformsのAPIを組み込む事が出来ました。

GoogleMapは今や地図操作において一強になっているので、皆さんも是非使ってみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , ,

blogenist

Author: blogenist