Yahoo APIで取得した飲食店の住所からGPS座標を求めGoogle Mapでピンを描画するアプリ(Flutter)

2021-06-07

はじめに

今どきの若者はアニメや映画を倍速で見るそうです。 バイトや学業・遊びにと忙しい中、友達との話題に付いていくために内容をざっと把握しておきたいとのことです。 そこまで他人に合わせることができることは中々できることではないなと思います。 ワイは、アニメを話題にする気もなく一人で楽しむことがメインになっているのでそれはそれでどうなんだろうと思うところはあります。

さて、今日はYahooローカルAPIから飲食店情報を取得して、Google Mapに描画するところまでを進めたいと思います。 今までの記事の総集編+αのような記事になります。

過去記事

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

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

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

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

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

アプリケーションの作り方

ベースプロジェクト

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),
    ),
  );
}

まとめ

ラーメン屋を検索して見つけることができましたね。 Google Mapのピンもいい感じに刺さってますね。