英文:
google_maps_flutter_web and google_maps_flutter works only locally but not when hosting to firebase
问题
I'm trying to make google maps works in flutter web app, I used google_maps_flutter and google_maps_flutter_web, It only works in locally when I run it but when I build and upload the project to firebase hosting it is not working.
in web/index.html
<script src="https://maps.googleapis.com/maps/api/js?key=<mykey>&callback=Function.prototype"></script>
My simple flutter code:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
void main() => runApp(GoogleMaps());
class GoogleMaps extends StatefulWidget {
  const GoogleMaps({Key? key}) : super(key: key);
  @override
  State<GoogleMaps> createState() => _GoogleMapsState();
}
class _GoogleMapsState extends State<GoogleMaps> {
  LatLng ll = LatLng(37.77483, -122.41942);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Demo'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: ll,
            zoom: 12,
          ),
          markers: {
            Marker(
              markerId: MarkerId('marker_1'),
              position: ll,
              infoWindow: InfoWindow(
                title: 'San Francisco',
              ),
            ),
          },
        ),
      ),
    );
  }
}
Does there anything special about firebase or the web for Android and IOS ?
I tried many things and I did not see anyone reported this issue in here or in github.
英文:
I'm trying to make google maps works in flutter web app, I used google_maps_flutter and google_maps_flutter_web, It only works in locally when I run it but when I build and upload the project to firebase hosting it is not working.
in web/index.html
<script src="https://maps.googleapis.com/maps/api/js?key=<mykey>&callback=Function.prototype"></script>
My simple flutter code:
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
void main() => runApp(GoogleMaps());
class GoogleMaps extends StatefulWidget {
  const GoogleMaps({Key? key}) : super(key: key);
  @override
  State<GoogleMaps> createState() => _GoogleMapsState();
}
class _GoogleMapsState extends State<GoogleMaps> {
  LatLng ll = LatLng(37.77483, -122.41942);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Maps Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Maps Demo'),
        ),
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: ll,
            zoom: 12,
          ),
          markers: {
            Marker(
              markerId: MarkerId('marker_1'),
              position: ll,
              infoWindow: InfoWindow(
                title: 'San Francisco',
              ),
            ),
          },
        ),
      ),
    );
  }
Does there anything special about firebase or the web for Android and IOS ?
I tried many things and I did not see anyone reported this issue in here or in github.
答案1
得分: 1
减小 google_maps_flutter 包的版本解决了我的问题。
原来是:
google_maps_flutter: ^2.4.0
工作的版本是:
google_maps_flutter: ^2.3.0
英文:
Decreasing the package version of google_maps_flutter solved my problem.
It was:
google_maps_flutter: ^2.4.0
Working one:
google_maps_flutter: ^2.3.0
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论