Flutter×Google Mapsで地図をアプリに組み込む方法

はじめに

Flutterは1つのコードベースで複数のプラットフォーム向けにアプリを開発できるフレームワークです。 そのため、AndroidやiOS向けアプリを同時に開発する場面で、とても注目されています。

一方で、地図を表示する機能は多くのアプリにおいて需要が高いですね。 地図を使えば、店舗検索やルート案内など、利用者にとってわかりやすいインターフェースを提供できるでしょう。

FlutterとGoogle Mapsの組み合わせは、地図をシームレスにアプリへ統合する手段のひとつです。 この記事では、初心者でも理解しやすいように、地図を表示するための手順と、各種機能の実装方法をわかりやすく説明していきます。

この記事を読むとわかること

• FlutterでGoogle Mapsを組み込む手順
• MarkerやPolylineの基本的な表示方法
• 地図の操作方法と実務での活用シーン
• 具体的なコード例を用いた実装の流れ

FlutterとGoogle Mapsを組み合わせるメリット

Flutterを使って地図アプリを開発する利点は、UIの柔軟さと効率の良さです。 単一のコードベースでiOSとAndroidに対応し、地図機能はGoogle Mapsを利用するため、信頼性の高い地図データを活用できます。

さらに、ウィジェットベースの構造を持つFlutterでは、地図上に自由にウィジェットを重ね合わせることがしやすいです。 たとえば、地図上にカスタムボタンを配置したり、地図と他の部品をスムーズに組み合わせることができます。

実務の現場でも、地図アプリや、地図機能が付いた付随ツールの需要は高いです。 お店の位置を一覧表示したり、イベント会場をマップで案内したり、さまざまなビジネス場面で利用できるからです。

開発スピードを優先したいときにもFlutterは便利です。 地図機能のベースはGoogleが提供するサービスを使うので、地図描画自体は比較的安定しています。 残りはFlutterでUIを作り込み、アプリとして公開する流れですね。

事前準備

FlutterでGoogle Mapsを使うために、いくつかの準備があります。 主に、Google Cloud Platform側の設定と、Flutterプロジェクトへの依存関係追加です。

Google Cloud PlatformでのAPIキー取得

地図を利用する場合は、Google Cloud PlatformでAPIキーを発行する必要があります。 具体的には、Google Maps Platformを有効化し、プロジェクトを作成してAPIキーを取得します。

取得後、APIキーはAndroidやiOSの設定ファイルに登録する形です。 AndroidではAndroidManifest.xml、iOSではInfo.plistなどにAPIキーを追記します。 これにより、アプリから正しく地図データへアクセスできるようになります。

Flutterプロジェクトの設定

次に、FlutterプロジェクトにGoogle Maps用のパッケージを追加します。 pubspec.yamlに依存関係を記述すると、プロジェクト内でGoogle Mapsウィジェットが使えるようになります。

以下のように書くと、google_maps_flutterが導入されます。

コピー
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: any

パッケージがインストールされたら、あとは実際にウィジェットを組み込む段階へ進みましょう。

地図を表示する方法

Flutterで地図を表示するには、GoogleMapウィジェットを使います。 最低限、座標や初期ズームレベルなどを指定して、地図を描画することが可能です。

シンプルな表示例

以下はシンプルに地図を表示するサンプルコードです。

コピー
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class SimpleMapPage extends StatefulWidget {
  @override
  _SimpleMapPageState createState() => _SimpleMapPageState();
}

class _SimpleMapPageState extends State<SimpleMapPage> {
  late GoogleMapController _mapController;

  // 東京駅付近の座標
  final CameraPosition _initialPosition = CameraPosition(
    target: LatLng(35.681236, 139.767125),
    zoom: 14,
  );

  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('シンプルな地図'),
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: _initialPosition,
      ),
    );
  }
}

上記のコードは、GoogleMapウィジェットを使い、初期表示する場所の座標を指定しています。 _onMapCreatedでコントローラを受け取り、後から地図の操作をする際に活用します。

Markerの追加

実務では、目的地やユーザーの周辺施設などを地図上にマークすることがよくあります。 Markerを使うと、簡単にピンを配置できます。

Markerの表示例

以下の例では、複数のMarkerを追加しています。

コピー
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class MarkerMapPage extends StatefulWidget {
  @override
  _MarkerMapPageState createState() => _MarkerMapPageState();
}

class _MarkerMapPageState extends State<MarkerMapPage> {
  late GoogleMapController _mapController;

  final CameraPosition _initialPosition = CameraPosition(
    target: LatLng(35.681236, 139.767125),
    zoom: 14,
  );

  final Set<Marker> _markers = {
    Marker(
      markerId: MarkerId('marker1'),
      position: LatLng(35.681236, 139.767125),
      infoWindow: InfoWindow(title: '東京駅'),
    ),
    Marker(
      markerId: MarkerId('marker2'),
      position: LatLng(35.689501, 139.691733),
      infoWindow: InfoWindow(title: '都庁周辺'),
    ),
  };

  void _onMapCreated(GoogleMapController controller) {
    _mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Markerの追加'),
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        markers: _markers,
        initialCameraPosition: _initialPosition,
      ),
    );
  }
}

Set<Marker>を用意し、その中にMarkerオブジェクトを追加します。 markerIdは固有のIDを指定し、positionには緯度経度を入れるだけです。

InfoWindowを使えば、Markerをタップしたときにラベルを表示できます。 このように複数の地点を簡単にマッピングできるので、店舗リストやイベント会場の位置などに活用しやすいですね。

地図の操作

地図は、ピンを置くだけでなく、移動やズーム、カメラのアニメーションなど、さまざまに操作できます。

カメラ位置の移動

地図コントローラを使えば、プログラムから位置を動かせます。 たとえば、ユーザーがボタンを押したら別の場所へ移動するなどの制御です。

コピー
void _moveToOsaka() {
  _mapController.animateCamera(
    CameraUpdate.newLatLng(
      LatLng(34.6937, 135.5023),
    ),
  );
}

_mapControllerに対して、animateCameraを呼び出すと、スムーズにカメラが移動します。 検索ボックスと連動させて、目的の緯度経度に飛ぶ機能を実装する場合にも便利でしょう。

PolylineやPolygonの描画

Marker以外に、移動経路やエリアを示したいこともあります。 PolylineやPolygonを利用すると、線や面を描画できます。

Polylineの例

たとえば、経路をラインで表すときは以下のように書きます。

コピー
Set<Polyline> _polylines = {
  Polyline(
    polylineId: PolylineId('route1'),
    points: [
      LatLng(35.681236, 139.767125),
      LatLng(35.689501, 139.691733),
    ],
    color: Colors.blue,
    width: 5,
  ),
};

あとは GoogleMap の polylines プロパティに _polylines を渡すと、地図上に描画されます。 ルート案内や配送経路の可視化など、実務でも役立つ場面は多いですね。

実務での活用シーン

地図機能は、具体的にどんなケースで使われるのでしょうか。 例えば、以下のようなシーンが挙げられます。

• 飲食店や観光スポットなどの案内アプリ
• 訪問先を可視化する営業支援アプリ
• ユーザーの位置情報を使ったイベントチェックイン機能
• 配車サービスや物流追跡アプリ

地図を単に表示するだけでなく、MarkerやPolylineで意味を付加すると、利用者は目的地やルートを把握しやすくなります。 さらに、位置情報と組み合わせることで、リアルタイムの検索やルーティングなど、多彩なユーザー体験が提供できます。

アプリをより使いやすくする工夫

地図は直感的に便利ですが、UIが煩雑になるリスクもあります。 そのため、画面のどこに地図を配置するか、使い方に応じて考慮が必要です。

フローティングボタンでの操作

FlutterのFloatingActionButtonを使い、ズームイン・ズームアウトボタンなどを地図の上に重ねる方法があります。 地図自体をタップで操作しつつ、大きなボタンで確実にズームする仕組みにすると親切ですね。

ダイアログとの組み合わせ

Markerをタップするとダイアログを出して詳細な情報を表示するなど、地図とUI部品を連動させると利便性が上がります。 例えば、イベント会場一覧を地図上に表示して、タップすると住所や開催時間が出るイメージです。

トラブルシューティング

地図が表示されないときは、AndroidManifest.xmlやInfo.plistにAPIキーが正しく設定されているかを確認しましょう。 また、エミュレーターの設定や実機の位置情報設定が影響する場合もあります。

緯度経度が正しくない場合も、一見すると地図が表示されていないように見えます。 実際はどこか違う場所に移動しているケースが多いので、Markerやカメラ位置に設定した座標が正しいかを再チェックすると良いです。

まとめ

FlutterとGoogle Mapsを組み合わせることで、マップ機能をスムーズにアプリへ導入しやすくなります。

MarkerやPolylineを使って情報をわかりやすく配置すれば、利用者に直感的な操作感を提供できるでしょう。 カメラ操作などもAPIを呼ぶだけで実装できるため、UIのカスタマイズや地図上の情報表示が柔軟に行えます。

実務シーンでも、地図があることでサービスの価値が高まりやすいので、Flutterによる地図アプリ開発は選択肢のひとつとして有力だと考えられます。 みなさんもぜひ、地図機能を活用してわかりやすいアプリを制作してみてはいかがでしょうか。