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()
),