How to add Google Maps to Flutter Web?

593 views Asked by At

I want to implement a Google Maps Widget in my Flutter Web App just like in my mobile App. I did it before and I know it's possible but I don't know how anymore. It also runs perfectly when debugging but after I deployed to web it doesn't work anymore.

Here is my minimal reproducible example:

void main() {
  runApp(const MyApp());
}

class GoogleMapWeb extends StatefulWidget {
  const GoogleMapWeb({super.key});

  @override
  State<GoogleMapWeb> createState() => _GoogleMapWebState();
}

class _GoogleMapWebState extends State<GoogleMapWeb> {
  late GoogleMapController _controller;

  void _onMapCreated(GoogleMapController controller) async {
    _controller = controller;
    _controller.setMapStyle(UtilsSilver.mapstyle);
    _controller.animateCamera(
      CameraUpdate.newCameraPosition(
        const CameraPosition(
          target: LatLng(50, 8),
          zoom: 17,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => TimeProvider(),
        ),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: true,
        key: _key,
        scaffoldMessengerKey: Utils.messengerKey,
        home: Scaffold(
          body: GoogleMap(
            onMapCreated: _onMapCreated,
            mapType: MapType.normal,
            scrollGesturesEnabled: true,
            trafficEnabled: false,
            zoomControlsEnabled: false,
            liteModeEnabled: false,
            compassEnabled: false,
            rotateGesturesEnabled: false,
            tiltGesturesEnabled: false,
            mapToolbarEnabled: false,
            myLocationButtonEnabled: false,
            myLocationEnabled: false,
            indoorViewEnabled: false,
            buildingsEnabled: false,
            initialCameraPosition: const CameraPosition(
              target: LatLng(0, 0),
              zoom: 15,
            ),
            onTap: (latLng) {
              print(latLng);
            },
          ),
        ),
      ),
    );
  }
}

Packages I use:

google_maps_flutter: ^2.2.5
google_maps_flutter_web: ^0.4.0+7

Script-Tag in the head of my web/index.html (yes I replaced "API-KEY" with my personal API key)

<script src="https://maps.googleapis.com/maps/api/js?key=API-KEY"></script>

The error I get:

TargetPlatform.macOS is not yet supported by the Maps Plugin.

Anyone has experience with this situation or just knows a good Tutorial which explains everything? The ones I found where to old...

Thanks in Advance!

0

There are 0 answers