Cannot integrade google-maps into flutter, plugin not loading

user_4177240 0
Viewed 389

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.

flutter google-maps
3 Answers

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

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

user_41772400

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.

user_22548910
Related