Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter WEB】GoogleMapを表示する
2021.11.06
Flutter WEBでGoogleMapを使った地図表示の方法を紹介します。
まずは、2つのパッケージをインストールしてください。
google_maps_flutter:モバイル向けGoogleMapのパッケージ
google_maps_flutter_web:google_maps_flutterをWEBで使えるようにするためのパッケージ
pubspec.yamlを編集してPub getしてください。
dependencies:
google_maps_flutter: ^2.1.0
google_maps_flutter_web: ^0.3.2
あとは、目的地の緯度経度を決めて地図表示するだけです。
緯度経度はGoogleMapを開いて、検索した場所のURLに載っているので事前にコピーしておきます。
以下のコードをコピペして、16行目あたりのLatLngの値を変えれば、AccessMap()で呼び出すだけで地図を表示することができます。
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class AccessMap extends StatefulWidget {
const AccessMap({Key? key}) : super(key: key);
@override
State<AccessMap> createState() => _AccessMapState();
}
class _AccessMapState extends State<AccessMap> {
final Completer<GoogleMapController> _controller = Completer();
late final LatLng _latLng = const LatLng(34.7017263, 135.4980374);
late final CameraPosition _cameraPosition;
@override
void initState() {
super.initState();
_cameraPosition = CameraPosition(
target: _latLng,
zoom: 17,
);
}
@override
Widget build(BuildContext context) {
return GoogleMap(
mapType: MapType.normal,
markers: {
Marker(
markerId: const MarkerId('id'),
position: _latLng,
),
},
initialCameraPosition: _cameraPosition,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
);
}
}
サイズの決まっていないWidgetなので、サイズをSizedBoxで決めて呼び出すようにしてみてください。
const SizedBox(
width: double.infinity,
height: 400,
child: AccessMap()
),
Flutterラボ
hatchoutschool

85min
プレミアム会員
見放題
GoogleMapを用いて地図アプリを作成する
2022.04.16
¥6,600
Flutter Daily
Flutterに関する記事を日々更新しています (223本)

【Dart】Stringからint, double, DateTimeに変換する
2020.09.14

【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18

【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01

【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13