FlutterでGoogle Map検索をする方法（Google Maps Places）

概要

趣味で作っているアプリでGoogle Map検索をしたかったのですが,
自分のGoogle Map関連の情報不足と海外含めてFlutterでの実装方法の情報が少なかったため,
記事を書いていく.

（Google Mapを表示するまでの記事は結構多いんですけどね...）

調査結果

dependencies: google_maps_flutter

Google公式のGoogle Mapを表示されるFlutter用のプラグイン.

Google Mapを表示したい場合はこのプラグインが必要で,
実装方法についてはこちらの記事が詳細に記載してあるので, ご参考に.

Google Maps Platform

Google様が提供しているMap関連のAPIを叩けるサービス.
昔はGoogle Maps APIという名前だったが, Google Maps Platformに変わり,
料金体系やAPIを18種類あったのを3種類になど変更があった.

今回はこれのPlacesという種類のAPIを利用する.
※僕はここらへんの前提知識が抜けていたため, 結構躓きました.

dependencies: google_maps_webservice

有志が作成してくれた, FlutterでGoogle Maps Platformを利用しやすくしてくれた,パッケージ.

今回はこのパッケージを利用して, Places APIを叩き, Google Map検索を行う.

dependencies: flutter_google_places

FlutterでGoogle Map検索しようと調べると, 一番情報が出てくるパッケージ.

ちゃんと利用していないので予想なのですが,
このパッケージはgoogle_maps_webserviceを利用してそれっぽいUIまでも提供してくれるものみたい.

今回は検索だけしたくてUIは自作したかったので, このパッケージは利用しない.
それっぽいUIがあればOK.という方であれば, このパッケージを利用するのもありだと思う.

※Google Map検索＝このパッケージと最初に思い込んでしまったため,
自分の要件に合っていないのに調べすぎて無駄に時間を使ってしまった...

僕の実装方法

google_maps_webserviceを導入

pubspec.yaml に情報を追加する.

dependencies:
  google_maps_webservice: ^0.0.16

Places APIを叩く

わかりやすくするために, GoogleMapsPlacesの初期化など一つのメソッドにいれたりなど,
そのまま使えるような形にはなっていないので, 自分のアプリ用に書き換えて利用してください.

API Keyの取得方法や確認方法も上記で紹介しました記事が参考になるので見てください.

import 'package:google_maps_webservice/places.dart';

void onTap() async {
  /// Google MapのAPI Keyを設定する
  GoogleMapsPlaces places = GoogleMapsPlaces(apiKey: '自分のAPI KEYを記載');
  
  /// 文字列から関連する建物名などを取得
  PlacesAutocompleteResponse placesAutocompleteResponse = 
    await places.autocomplete('検索したい文字列', language: 'ja');
  /// 概要情報を標準出力
  placesAutocompleteResponse.predictions.map(
    (Prediction prediction) => print(prediction.description)
  );
  
  /// 上記で取得した情報から詳細情報（緯度経度など）を取得
  PlacesDetailsResponse placesDetailsResponse = 
    await places.getDetailsByPlaceId(prediction.placeId); // 上記のリストで取得したPrediction predictionをここで利用する
  Location location = placesDetailsResponse.result.geometry.location; //緯度経度の取得
}