Flutter Web: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

[rscflexible]

When I define my in web/index.html to show Google Map on screen and everything work as expect but when I call a function to search place that use your package it's will show "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." and then I can't use my moveCamera function at all (It's work before I calling findAutocompletePredictions function). But when I use hot reload in android studio everything works without an error but stop and run will make it happen again

Second error is when I call moveCamera Function after calling findAutocompletePredictions Function Sorry for my bad English I hope you can help me. Thank You.

[matanshukry]

@rscflexible Can you provide a reproducible example?

[rscflexible]

When I have google map api key store in project/web/index.html

and I call this function when I press search button in MapScreen

It will show "You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." in browser console and android studio debug console (But I got the google place predictions result fine)

After that warning when I use move camera function in MapScreen. The camera will not move to target LatLng even if I set fixed LatLng value to it( It works before I call function in second image)

And It will show this error in browser console also

But if I remove google map api key that store in /web/index.html and use function in second image it will not get the errror but then I can't display google map on my MapScreen

Thank you for your fast response.

[matanshukry]

@rscflexible I need a reproducible example - not just screenshots and code snippets. some repository I can clone and run and it will show the same error.

I tried replicating it on my own but it works - I got an index.html file with the added maps/api/js link like you wrote, and I can still run the search from this package.

[rscflexible]

https://github.com/rscflexible/map_test.git

Your search function work fine here too but somehow I don't know why it make CameraUpdate unusable for me. I can't move camera to other location after use search function.

The problem only occur when you run it for the first time or stop the web and run it again but if you're hot reload it in android studio everything will work fine without warning or error and CameraUpdate will work after use search function

[matanshukry]

@rscflexible I can't get the example to show the map. But either way, why are you trying to insert the <script tag ? the web implementation of this package already does that on initialization.

Did you try to just initialize the FlutterGooglePlacesSdk in initState, without using the script tag?

[rscflexible]

If I remove script tag and add FlutterGooglePlacesSdk(apiKey); in initState. The map will not show and throw an exception The following JSNoSuchMethodError was thrown building GoogleMap(dirty, dependencies: [Directionality], state: _GoogleMapState#0521d): TypeError: Cannot read properties of undefined (reading 'maps') The relevant error-causing widget was: GoogleMap

Could you provide me some example of how to use your package with google_maps_flutter_web without the need to add script tag?

[matanshukry]

@rscflexible sure, you just need to make sure the GoogleMap widget will be built after the places is initialized. You can use a future builder and the .isInitialized method with the returned future:

class variables:

  late place.FlutterGooglePlacesSdk _places;
  late Future _placesInitFuture;

initState:

  @override
  void initState() {
    super.initState();

    _places = place.FlutterGooglePlacesSdk('apiKey');
    _placesInitFuture = _places.isInitialized();
  }

and instead of using GoogleMap widget directly, use:

              FutureBuilder(
                  future: _placesInitFuture,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.done) {
                      return GoogleMap(
                        myLocationButtonEnabled: false,
                        initialCameraPosition: CameraPosition(
                          target: LatLng(lat!, lng!),
                        ),
                        mapType: MapType.normal,
                        onMapCreated: _onMapCreate,
                        myLocationEnabled: false,
                      );
                    }
                    return const CircularProgressIndicator();
                  },
              ),

[rscflexible]

@matanshukry Your solution is working. Thank you very much for helping me out and for your hard work that you put into this wonderful google place package.

[matanshukry]

@rscflexible you welcome!

[ZacharyHandshoe]

@rscflexible sure, you just need to make sure the GoogleMap widget will be built after the places is initialized. You can use a future builder and the .isInitialized method with the returned future:

class variables:

  late place.FlutterGooglePlacesSdk _places;
  late Future _placesInitFuture;

initState:

  @override
  void initState() {
    super.initState();

    _places = place.FlutterGooglePlacesSdk('apiKey');
    _placesInitFuture = _places.isInitialized();
  }

and instead of using GoogleMap widget directly, use:

              FutureBuilder(
                  future: _placesInitFuture,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.done) {
                      return GoogleMap(
                        myLocationButtonEnabled: false,
                        initialCameraPosition: CameraPosition(
                          target: LatLng(lat!, lng!),
                        ),
                        mapType: MapType.normal,
                        onMapCreated: _onMapCreate,
                        myLocationEnabled: false,
                      );
                    }
                    return const CircularProgressIndicator();
                  },
              ),

This solved my issue. I was having a near identical problem. I was porting my Google Maps implementation to Flutter Web utilizing google_maps_flutter_web.

I fixed it by removing the google_maps_flutter_web package and line

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

from my index.html file, and following the quoted instructions.