google_maps_flutter_web and google_maps_flutter works only locally but not when hosting to firebase

huangapple
go评论83阅读模式
英文:

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

  1. <script src="https://maps.googleapis.com/maps/api/js?key=<mykey>&callback=Function.prototype"></script>

My simple flutter code:

  1. import 'package:flutter/material.dart';
  2. import 'package:google_maps_flutter/google_maps_flutter.dart';
  3. import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';
  5. void main() => runApp(GoogleMaps());
  7. class GoogleMaps extends StatefulWidget {
  8.   const GoogleMaps({Key? key}) : super(key: key);
  10.   @override
  11.   State<GoogleMaps> createState() => _GoogleMapsState();
  12. }
  14. class _GoogleMapsState extends State<GoogleMaps> {
  15.   LatLng ll = LatLng(37.77483, -122.41942);
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return MaterialApp(
  19.       title: 'Google Maps Demo',
  20.       home: Scaffold(
  21.         appBar: AppBar(
  22.           title: Text('Google Maps Demo'),
  23.         ),
  24.         body: GoogleMap(
  25.           initialCameraPosition: CameraPosition(
  26.             target: ll,
  27.             zoom: 12,
  28.           ),
  29.           markers: {
  30.             Marker(
  31.               markerId: MarkerId('marker_1'),
  32.               position: ll,
  33.               infoWindow: InfoWindow(
  34.                 title: 'San Francisco',
  35.               ),
  36.             ),
  37.           },
  38.         ),
  39.       ),
  40.     );
  41.   }
  42. }

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

  1. &lt;script src=&quot;https://maps.googleapis.com/maps/api/js?key=&lt;mykey&gt;&amp;callback=Function.prototype&quot;&gt;&lt;/script&gt;

My simple flutter code:

  1. import &#39;package:flutter/material.dart&#39;;
  2. import &#39;package:google_maps_flutter/google_maps_flutter.dart&#39;;
  3. import &#39;package:google_maps_flutter_web/google_maps_flutter_web.dart&#39;;
  5. void main() =&gt; runApp(GoogleMaps());
  8. class GoogleMaps extends StatefulWidget {
  9.   const GoogleMaps({Key? key}) : super(key: key);
  11.   @override
  12.   State&lt;GoogleMaps&gt; createState() =&gt; _GoogleMapsState();
  13. }
  15. class _GoogleMapsState extends State&lt;GoogleMaps&gt; {
  16.   LatLng ll = LatLng(37.77483, -122.41942);
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     return MaterialApp(
  20.       title: &#39;Google Maps Demo&#39;,
  21.       home: Scaffold(
  22.         appBar: AppBar(
  23.           title: Text(&#39;Google Maps Demo&#39;),
  24.         ),
  25.         body: GoogleMap(
  26.           initialCameraPosition: CameraPosition(
  27.             target: ll,
  28.             zoom: 12,
  29.           ),
  30.           markers: {
  31.             Marker(
  32.               markerId: MarkerId(&#39;marker_1&#39;),
  33.               position: ll,
  34.               infoWindow: InfoWindow(
  35.                 title: &#39;San Francisco&#39;,
  36.               ),
  37.             ),
  38.           },
  39.         ),
  40.       ),
  41.     );
  42.   }

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 包的版本解决了我的问题。

原来是：

  1. google_maps_flutter: ^2.4.0

工作的版本是：

  1. google_maps_flutter: ^2.3.0
英文:

Decreasing the package version of google_maps_flutter solved my problem.

It was:

  1. google_maps_flutter: ^2.4.0

Working one:

  1. google_maps_flutter: ^2.3.0

huangapple
  • 本文由 发表于 2023年4月7日 05:04:13
  • 转载请务必保留本文链接：https://go.coder-hub.com/75953770.html
  • firebase
  • flutter
  • google-maps
  • google-maps-api-3
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定