Hello I'm trying to use the
google_maps_flutter
package to make a Google map for the Client so that he can Track and locate Orders within the application the maps are not showing from the first time Even though you see in this code the GoogleMap must be created if the
polylineCoordinates.isEmpty || currentLocation == null
is not null if so the application will create a Lottie animation and a text message underneath well, as you can see from this Picture (gif) the Problem is clear the map is not showing from the first navigation to the (mainPage.dart) screen
screenshot GIF
my Google cloud account is Free 300$ credit for 90 days
What I have tried:
import 'dart:async';
import 'package:applicationservice/RegisterPage.dart';
import 'package:applicationservice/homePage.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_polyline_points/flutter_polyline_points.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';
import 'package:lottie/lottie.dart' as animation;
class MainScreen extends StatefulWidget {
const MainScreen({super.key});
@override
State<MainScreen> createState() => _MainScreenState();
}
const String google_api_key = "AIzaSyAnpCS9K8...._kabKsMAZzsQ";
class _MainScreenState extends State<MainScreen> {
final Completer<GoogleMapController> _controller = Completer();
static const LatLng sourceLocation = LatLng(32.885353, 13.180161);
static const LatLng destination = LatLng(32.895325, 13.181645);
List<LatLng> polylineCoordinates = [];
LocationData? currentLocation;
void getCurrentLocation() async {
Location location = Location();
location.getLocation().then(
(location) {
currentLocation = location;
},
);
GoogleMapController googleMapController = await _controller.future;
location.onLocationChanged.listen(
(newLoc) {
currentLocation = newLoc;
googleMapController
.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
zoom: 13.5,
target: LatLng(
newLoc.latitude!,
newLoc.longitude!,
))));
setState(() {});
},
);
}
void getRoutePolylinePoints() async {
PolylinePoints polylinePoints = PolylinePoints();
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
google_api_key,
PointLatLng(sourceLocation.latitude, sourceLocation.longitude),
PointLatLng(destination.latitude, destination.longitude),
);
if (result.points.isNotEmpty) {
result.points.forEach(
(PointLatLng point) => polylineCoordinates.add(
LatLng(point.latitude, point.longitude),
),
);
setState(() {});
}
}
@override
void initState() {
getCurrentLocation();
getRoutePolylinePoints();
print("TTTT");
super.initState();
}
@override
Widget build(BuildContext context) {
TextStyle defaultStyle = TextStyle(
color: Colors.black, fontFamily: 'almarailight', fontSize: 20.0);
TextStyle linkStyle = TextStyle(color: Colors.blue);
return Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromRGBO(33, 33, 33, 1),
centerTitle: true,
title: const Text(
'الخريطة',
style: TextStyle(
fontFamily: 'cairoBold',
fontSize: 32.0,
color: Colors.white,
shadows: <Shadow>[
Shadow(
offset: Offset(2, 2),
blurRadius: 1.0,
color: Color.fromARGB(255, 0, 0, 0),
),
Shadow(
offset: Offset(2, 2),
blurRadius: 1.0,
color: Color.fromARGB(124, 0, 0, 0),
),
],
),
),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: const BoxDecoration(
color: Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage('https://i.imgur.com/nu9p9t3.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(50.0)),
),
),
),
actions: <Widget>[
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {
},
)
],
),
body: polylineCoordinates.isEmpty || currentLocation == null
? Center(
child: Column(children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 5),
child:
animation.Lottie.asset('assets/lotties/loadingLocation.json'),
),
const Text(
"الرجاء الإنتظار ...",
style: TextStyle(
fontFamily: 'almarailight',
fontSize: 26,
color: Colors.black),
),
]))
: GoogleMap(
initialCameraPosition:
const CameraPosition(target: sourceLocation, zoom: 14.5),
polylines: {
Polyline(
polylineId: PolylineId("route"),
points: polylineCoordinates,
color: Colors.black,
width: 6,
)
},
markers: {
Marker(
markerId: const MarkerId("currentLocation"),
position: LatLng(
currentLocation!.latitude!, currentLocation!.longitude!),
),
const Marker(
markerId: MarkerId("source"),
position: sourceLocation,
),
const Marker(
markerId: MarkerId("destination"),
position: destination,
),
},
onMapCreated: (mapController) {
_controller.complete(mapController);
},
myLocationEnabled: true,
myLocationButtonEnabled: true,
onCameraMove: (CameraPosition position) {
currentLocation = LocationData.fromMap({
"latitude": position.target.latitude,
"longitude": position.target.longitude
});
},
onCameraIdle: () {
setState(() {});
},
),
);
}
}