こんにちは。今回はFlutterFlowでGoogleMap（グールグマップ）を使って地図アプリを作ってみたいと思います。
地図機能はいろんなアプリで必要ですよね。飲食店の検索アプリ、不動産系アプリで場所の特定、アルバイトアプリでのアルバイト場所の表示、などあやゆるアプリの様々な場面で使われます。
地図は情報を直感的に理解するための強力なツールであり、ユーザー体験を大幅に向上させられるので非常に重要な機能ですよね。
そんなGoogleMapを用いた地図アプリをFlutterFlowで作成する方法を書いてみたいと思います。
FlutterFlowの地図アプリで出来ること
まず何かのコンテンツの詳細画面でその場所を示すピンを1つ立てたり、
検索する画面でピンを複数立てたり、
以下のように場所を検索したりすることができます。
まずはGoogleMapのAPIキーを取得
まずはGoole Map PlatformでGoogleMapに必要なAPIキーを取得しましょう。
この辺はFlutterFlow特有の話ではないので、普通に検索すると出てくると思いますのでわからない方はググって調べてみましょう。
すると以下のようにCredentialsというところにiOSとAndroidとBrowser用のキーができます。これをコピーしておきましょう。
FlutterFlow側で取得したGoogleMapのAPI Keyを設定する
以下のように取得したAPIキーをFlutterFlowのSettingのGoogleMapsのところのAPIKeysに、それぞれコピペします。
FlutterFlowにGoogleMapを配置
Widgetで「google map」で検索するとすぐElementが表示されます。これを好きなところに配置しましょう。
こんな感じですね。
Google Mapの設定
最後は、以下のように設定をしていきましょう。
Num MarkersはSingleかMultiかを選べます。ピンを一つたてる場合はSingleを複数必要な場合はMultiを選びます。
そしてMarker Documentでどのドキュメントから位置情報を取得するのかの設定、Initial Locationで初期表示位置を設定をします。
もうこれでできました！簡単ですね。
複数のピンの立て方や表示位置の検索の仕方など
今回は簡単にGoogleMap上にピンを一つ立てる方法をざっくり解説してきましたが、詳しいことはブログだと書ききれないので動画で作成しています。
もっと細かい具体的な手順を知りたかったり、ピンを複数立てる方法や表示位置の検索方法なども知りたい方は以下の動画が参考になると思うのでみてみてください。
FlutterFlowのGoogleMap（Googleマップ）地図機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。