4

I am trying to follow the "Adding Google Maps to a Flutter app" tutorial from link: https://codelabs.developers.google.com/codelabs/google-maps-in-flutter#3

After running the code in Android Studio (on MAC) I get the following:

======== Exception caught by widgets library =======================================================
The following JSNoSuchMethodError was thrown building GoogleMap(dirty, dependencies: [Directionality], state: _GoogleMapState#1c76c):
TypeError: Cannot read properties of undefined (reading 'maps')

Check the screenshot of how it appears in chrome.

enter image description here

What am I doing wrong?

Any help would be really appreciated.

3 Answers3

1

Try this basic Map code, hope you understand and if you have any doubts please feel free to ask in the comments section.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Maps',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapView(),
    );
  }
}

class MapView extends StatefulWidget {
  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  CameraPosition _initialLocation = CameraPosition(target: LatLng(37.42796133580664, -122.085749655962),zoom: 14.4746);
  GoogleMapController mapController;

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;

    return Container(
      height: height,
      width: width,
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            GoogleMap(
              initialCameraPosition: _initialLocation,
              myLocationEnabled: true,
              myLocationButtonEnabled: false,
              mapType: MapType.normal,
              zoomGesturesEnabled: true,
              zoomControlsEnabled: false,
              onMapCreated: (GoogleMapController controller) {
              mapController = controller;
                 },
             ),
          ],
        ),
      ),
    );
  }
shanmkha
  • 416
  • 1
  • 8
  • 27
  • Still tried your basic code but the same error appears: TypeError: Cannot read properties of undefined (reading 'maps') See also: https://flutter.dev/docs/testing/errors – bytesixtyfour Dec 30 '21 at 19:54
  • If I run the initial code or your suggestion on sdk phone emulator (added an android) it works properly. It doesn't work when I run it at Chrome (web). Any idea? Running on web is much faster so it is more preferable for debugging. Thanks – bytesixtyfour Dec 30 '21 at 20:46
  • 1
    I think Google Map that you are using may not support the web (I am not sure). If you want to enable a map for the web, [try this article](https://medium.com/flutter-community/flutter-web-and-google-maps-f2489b483a1f). but if you want it only for testing I will suggest you use physical mobile. – shanmkha Dec 31 '21 at 08:00
1

I have worked with google maps for Flutter web for many different projects, and each time I learn something new. This particular error was driving me nuts, till I found that I forgot to include the Google Map API in the index.html inside the project web folder. you may have overlooked it just like me. please refer to this topic in the forum to know how to add that.

Aadn
  • 93
  • 1
  • 5
0

The last comment above that the web version is not supported was the problem. Tried with the mobile emulator and everything worked right. Thanks

  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 12 '22 at 02:19