Cannot integrade google-maps into flutter, plugin not loading

Question

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.

What am I doing wrong?

Any help would be really appreciated.

Answer 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.

Answer 2

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