FlutterでGoogle Mapにピンを立てて周辺のラーメン屋情報を表示するアプリの作り方

2021-06-07

はじめに

この記事では、Flutterを使ってGoogle Mapにピンを立て、周辺のラーメン屋の情報を取得するアプリケーションを作成する方法を紹介します。このアプリケーションでは、Yahoo APIを利用して飲食店情報を取得し、Google Map上にピンを立てることができます。このアプリケーションは、主にFlutterとGoogle Map、Yahoo APIを使用して開発されています。

過去記事

関連する過去記事をここにまとめます。

FlutterからYahoo APIを叩いて飲食店情報を取得しよう(Geocodingもあるよ)

Json to Dartを使ってWEB APIから取得したJsonをFlutterで取り扱うTIPS

Provider Patternを使い、FlutterアプリUIとロジックを分離するための考察

FlutterでGoogle Map上にピンを刺してみる

コード解説

このアプリケーションでは、まずlogic.dartファイルで、Yahoo APIを利用して飲食店情報を取得する関数、飲食店情報の住所からGPS座標を取得する関数、および店の名前、住所、GPS座標をリストに詰め込む関数を作成しています。

次に、ui.dartファイルでは、Google Mapにピンを立てるためのMarkerオブジェクトを作成し、Google Map上に描画する方法を説明しています。また、floatingActionButtonを押すことで、logic.dartのincrement関数が呼び出され、店の情報がマーカーに刺さるようにしています。

ベースプロジェクト

githubにあげているベースプロジェクトを使っていきます。

git clone https://github.com/kenpos/providerPatternSample.git

AndroidManifest

GoogleMap APIキーをAndroid Manifestを追加します。 Google Mapを登録してAPIキーを取得し、AndroidManifestに追加する。

<meta-data
     android:name="flutterEmbedding"
     android:value="2" />
 <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="APIキー" />
 />
</application>
</manifest>

logic.dart

YahooApiから飲食店情報を取得する関数
飲食店情報住所をからGPS座標を取得する関数
店の名前、住所、GPS座標をリストに詰め込む関数を作ります。

店の名前、住所、GPS座標をリストに詰め込む関数

Yahoo apiで取得したデータを構造体に詰め込んでおき、その値を引数に渡します。住所と店の名前と座標を取得し詰め込みます。

  Future<List<MakerLocation>> setLocationFromYahooApiAddress(
      YahooApi yapi) async {
    List<MakerLocation> locations = [];
    for (var i = 0; i < yapi.resultInfo.count; i++) {
      MakerLocation markerlocationtmp = MakerLocation(
          name: '',
          location: Location(
              latitude: 0.0, longitude: 0.0, timestamp: DateTime.now()),
          address: '');

      String address = yapi.feature[i].property.address;
      String name = yapi.feature[i].name;
      markerlocationtmp.location = await requestAddCoder(address);
      markerlocationtmp.address = address;
      markerlocationtmp.name = name;
      locations.add(markerlocationtmp);
    }
    return locations;
  }

YahooApiから飲食店情報を取得する関数

Yahoo APIから<APIキー>を取得します。 latとlonに座標を入れるとその周辺の座標を取得することができます。

  Future<YahooApi> getYahooLocalSerarchAPI() async {
    var uri = Uri.parse(
        'https://map.yahooapis.jp/search/local/V1/localSearch?appid=<APIキー>&output=json&query=ラーメン&lat=34.652499&lon=135.506306');
    http.Response res = await http.get(uri);
    if (res.statusCode == 200) {
      String data = res.body;
      Map<String, dynamic> map = jsonDecode(data);
      var yahooApi = YahooApi.fromJson(map);
      return yahooApi;
    } else {
      throw Exception('Failed to load post');
    }
  }

飲食店情報住所をからGPS座標を取得する関数

アドレスを文字列で渡して、Locationを取得する。

  Future<Location> requestAddCoder(String address) async {
    var tmp = await locationFromAddress(address);
    var location = tmp[0];
    return location;
  }
}

ui.dart

上記ファイルに色々と機能を追加していきましょう。

Marker

GoogleMapにピンを刺します。GPS座標と名前と住所をMakerに停めていく。

final Set<Marker> markers = {};

Set<Marker> _createMarker(List<MakerLocation> tmp) {
  tmp.asMap().forEach((i, markerLocation) {
    print(markerLocation.name);
    print(markerLocation.location);

    var markerlocation = LatLng(
        markerLocation.location.latitude, markerLocation.location.longitude);
    markers.add(
      Marker(
        markerId: MarkerId('myMarker{$i}'),
        position: markerlocation,
        infoWindow: InfoWindow(
            title: markerLocation.name, snippet: markerLocation.address),
      ),
    );
  });
  return markers;
}

Google Mapの描画

これで良いです。floatingActionButtonを押したらlogic.dartのincrementを呼び出します。ボタンを押したら店の情報をマーカに刺します。

@override
Widget build(BuildContext context) {
  // ignore: unnecessary_statements
  var tmplocation = Provider.of<CountModel>(context).addresslocation;
  return new Scaffold(
    appBar: AppBar(
      title: Text('Flutter Demo Home Page'),
    ),
    body: GoogleMap(
      mapType: MapType.normal,
      markers: Set.from(
        _createMarker(tmplocation),
      ),
      initialCameraPosition: _kGooglePlex,
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
      myLocationEnabled: true,
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: Provider.of<CountModel>(context).increment,
      tooltip: 'Increment',
      child: Icon(Icons.search),
    ),
  );
}

まとめ

この記事では、Flutterを使用してGoogle Map上に周辺のラーメン屋の情報を表示するアプリケーションの作成方法を紹介しました。Yahoo APIを利用して飲食店情報を取得し、Google Map上にピンを立てることができました。これを応用して、さまざまな飲食店情報を取得・表示するアプリケーションを作成することが可能です。