Here's the code that I have so far
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class TempView extends StatefulWidget {
const TempView({Key? key}) : super(key: key);
#override
State<TempView> createState() => _TempViewState();
}
class _TempViewState extends State<TempView> {
final Completer<GoogleMapController> _controller =
Completer<GoogleMapController>();
static const CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
static const CameraPosition _kLake = CameraPosition(
bearing: 192.8334901395799,
target: LatLng(37.43296265331129, -122.08832357078792),
tilt: 59.440717697143555,
zoom: 19.151926040649414);
#override
Widget build(BuildContext context) {
return Scaffold(
body: GoogleMap(
onTap: (argument) => print("tapped"),
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _goToTheLake,
label: const Text('To the lake!'),
icon: const Icon(Icons.directions_boat),
),
);
}
Future<void> _goToTheLake() async {
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
}
}
It's the same as the code on the pub.dev page for the google_maps_flutter widget, except I added an onTap.
For some reason the onTap never fires! I've even tried adding custom gesture recognisers into the gestureRecognizers set, like the EagerGestureRecognizer and the TapGestureRecognizer.
I'm on Flutter 3.7 macOS with Apple M1.
Why isn't it working, and how can I get around this?
Wrap GoogleMap widget with InkWell Widget and use its property of onTap, it will work.
InkWell(
onTap: () => ,
child:
),
I ran your code and it seems to run just fine. tapped gets printed every time i tap on map.
Please make sure your tap is in GoogleMap region and that no other widget is overlaying if this isn’t the whole code.
Related
I'm using : google_maps_flutter: ^2.1.6
flutter version : 3.0.1
dart version : 2.17.1
I can through the controller add marker, polygon, polyline and circles, but I couldn't change this icon that represents my location.
import 'dart:io';
import 'package:exemplo/controller/google_maps_controller.dart';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class GoogleMapsWidget extends StatefulWidget {
const GoogleMapsWidget({super.key});
#override
State<GoogleMapsWidget> createState() => _GoogleMapsWidgetState();
}
class _GoogleMapsWidgetState extends State<GoogleMapsWidget> {
final GoogleMapsController googleMapsController = GoogleMapsController();
#override
void initState() {
googleMapsController.gpsPermission();
if (Platform.isAndroid) {
AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
}
super.initState();
}
#override
void dispose() {
googleMapsController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: googleMapsController,
builder: (BuildContext context, Widget? child) => GoogleMap(
markers: googleMapsController.marker,
polygons: googleMapsController.polygon,
mapType: MapType.normal,
zoomControlsEnabled: true,
myLocationEnabled: true,
initialCameraPosition: CameraPosition(
target: LatLng(
googleMapsController.lat,
googleMapsController.long,
),
zoom: 15,
),
onMapCreated: googleMapsController.onMapCreated,
onTap: googleMapsController.selectLocal,
),
);
}
}
That blue ball in the middle
i start with this code but all what i get white screen
how i can use google map to get current location or choose location.I am using GoogleMap package in flutter to get the required current location.
import 'dart:async'; 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 Google Maps Demo', home: MapSample(), ); } }
class MapSample extends StatefulWidget { #override
State createState() => MapSampleState();
}
class MapSampleState extends State {
Completer _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition( target:
LatLng(37.42796133580664, -122.085749655962), zoom: 14.4746, );
static final CameraPosition _kLake = CameraPosition( bearing:
192.8334901395799, target: LatLng(37.43296265331129,
-122.08832357078792), tilt: 59.440717697143555, zoom:
19.151926040649414);
#override Widget build(BuildContext context) { return new Scaffold(
body: GoogleMap(
mapType: MapType.hybrid, initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
floatingActionButton:
FloatingActionButton.extended(
onPressed: _goToTheLake,
label:
Text('To the lake!'),
icon: Icon(Icons.directions_boat), ),
);
}
Future _goToTheLake() async {
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
}
}
If you're using Url properly(no spelling/parameter mistakes) with API key and there's no error from the server which happens a lot due to restrictions. Then there are other steps you need to, ask Location permission on app loading using https://pub.dev/packages/permission_handler package like this.
Code can be something like this.
Create an app_persmission_provider file.
class AppPermissionProvider with ChangeNotifier {
PermissionStatus _locationStatus = PermissionStatus.denied;
LatLng? _locationCenter;
final location_package.Location _location =
location_package.Location();
location_package.LocationData? _locationData;
// Getter
get locationStatus => _locationStatus;
get locationCenter => _locationCenter;
get location => _location;
void getLocationStatus() async {
final status = await Permission.location.request();
_locationStatus = status;
notifyListeners();
print(_locationStatus);
}
void getLocation() async {
_locationData = await _location.getLocation();
_locationCenter = LatLng(
_locationData!.latitude as double, _locationData!.longitude as double);
notifyListeners();
}
}
Then declare the provider on the root maybe, and In my case, I'm initializing some functions onInit. By doing so, android will ask for permission for location when your page loads.
#override
void initState() {
super.initState();
appPermission = Provider.of<AppPermissionProvider>(context, listen: false);
appPermission.getLocationStatus();
appPermission.getLocation();
}
And then using consumer.
SafeArea(
child: Consumer<AppPermissionProvider>(
builder: (context, appPermissionProvider, _) => appPermission
.locationCenter ==
null
? const Center(child: CircularProgressIndicator())
:
GoogleMap( myLocationButtonEnabled:
appPermissionProvider.locationStatus ==
PermissionStatus.granted
? true
: false,
myLocationEnabled: true,
initialCameraPosition: CameraPosition(
target: appPermission.locationCenter,
zoom: 14,
),
onMapCreated: onMapCreated,
mapType: MapType.normal,
compassEnabled: true,
),
),
)
Here, I am checking if permission is granted, also I am only enabling myLocationButton if location permission is granted.
You can use google_maps_flutter package ,
A short example how you can use it.
For more clearity you can visit
Here or you can use geolocator.
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
LatLng _initialcameraposition = LatLng(20.5937, 78.9629);
GoogleMapController _controller;
Location _location = Location();
void _onMapCreated(GoogleMapController _cntlr)
{
_controller = _cntlr;
_location.onLocationChanged.listen((l) {
_controller.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(target: LatLng(l.latitude, l.longitude),zoom: 15),
),
);
});
}
Here i'am asking again on Stack Overflow :), when i try to make a GoogleMapsController variable it show this
Non-nullable instance field 'googleMapController' must be initialized.
Try adding an initializer expression, or a generative constructor that initializes it, or mark it 'late'
my controller
GoogleMapController googleMapController;
and if i use this
Completer<GoogleMapController> _controller = Completer();
the Completer is not defined
and if i use
late GoogleMapController googleMapController;
it will occurs error when i use the controller and say
LateError (LateInitializationError: Field 'googleMapController' has not been initialized.)
i don't understand why people on youtube didn't get any error like this
Because of null safety your variable must be initialzied when created,
If you are using a Flutter 2.5.3 and later you can use late to tell it that it will be initialized after being created but before being used (that is why people on YouTube didn't get any error like this if they didn't use late ) :
late final Completer<GoogleMapController> _controller = Completer();
here is the full example for you using same versions flutter 2.8.1 , google_maps_flutter 2.1.1
class MapController extends StatefulWidget {
const MapController({Key? key}) : super(key: key);
#override
_MapControllerState createState() => _MapControllerState();
}
class _MapControllerState extends State<MapController> {
late final Completer<GoogleMapController> _controller = Completer();
static CameraPosition get _kGooglePlex => const CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
static CameraPosition get _kLake => const CameraPosition(
bearing: 192.8334901395799,
target: LatLng(37.43296265331129, -122.08832357078792),
tilt: 59.440717697143555,
zoom: 19.151926040649414);
#override
Widget build(BuildContext context) {
return Scaffold(
body: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
floatingActionButton: FloatingActionButton.extended(
onPressed: _goToTheLake,
label: const Text('To the lake!'),
icon: const Icon(Icons.directions_boat),
),
);
}
Future<void> _goToTheLake() async {
final GoogleMapController controller = await _controller.future;
controller.animateCamera(CameraUpdate.newCameraPosition(_kLake));
}
I display in my application a google map and a marker on a predefined position. I also changed the icon of the marker but it is too large and above all does not adapt to the size of the screen and its definition.
I would therefore like to adapt the dimensions of cd nouveau marker to the size of my screen. First of all, how to change its size?
My code is the following:
class _MyAppState extends State<MyApp>{
late GoogleMapController mapController;
....
late BitmapDescriptor iconMareaEstLa;
final List<Marker> _listMk =[];
....
void _onMapCreated(GoogleMapController controller){
mapController = controller;
setState(() {
_listMk.add(
Marker(
markerId: const MarkerId('MKIDPOSMAREA'),
draggable: false,
icon: iconMareaEstLa,
position: (LatLng(posMareaLat,posMareaLng)),
)
);
});
}
....
#override
void initState(){
super.initState();
BitmapDescriptor
.fromAssetImage(
const ImageConfiguration(size:Size(50,50)),
'images/MareaBlancFondBlanc.png')
.then((value) => iconMareaEstLa = value);
}
...
Widget build(BuildContext context) {
MediaQueryData queryData;
queryData = MediaQuery.of(context);
screenW =queryData.size.width;
screenH =queryData.size.height;
return Scaffold(
body: Stack(
children: [
GoogleMap(
markers: Set.of(_listMk),
onMapCreated: _onMapCreated,
mapType: _currentMapType,
myLocationButtonEnabled: false,
zoomControlsEnabled: false,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 14.0
),
),
....
Can someone tell me where and how to specify the dimensions of my new marker.
Merci
YC
I am trying to get the user's current location from Google Maps but I am getting an exception in return which I can't seem to understand why it's happening.
The app is simple - get the user's current location, and then zoom the camera onto that location. That's it.
I am going to attach my code and the exception message. The strange thing is that I am getting my LatLng correctly as you can see in the exception message, so why is the camera not pointing to that location?
class Map extends StatefulWidget {
#override
_MapState createState() => _MapState();
}
class _MapState extends State<Map> {
LatLng currentLatLng;
Completer<GoogleMapController> _controller = Completer();
#override
void initState(){
super.initState();
Geolocator.getCurrentPosition().then((currLocation){
setState((){
currentLatLng = new LatLng(currLocation.latitude, currLocation.longitude);
});
});
}
#override
Widget build(BuildContext context) {
print("Current Location --------> " + currentLatLng.latitude.toString() + " " + currentLatLng.longitude.toString());
return MaterialApp(
home: new Scaffold(
body: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(target: currentLatLng),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
),
);
}
}
note - I am using 'geolocator' and 'google_maps_flutter' from pub.dev - all latest versions.
This is async programming. currentLatLng is null until getCurrentPosition calls it's callback, so you can't just do this:
initialCameraPosition: CameraPosition(target: currentLatLng)
because, as you error shows, currentLatLng is null.
Your two options are:
Set the map to a default position that you define and then update the position using the mapcontroller when getCurrentPosition completes.
Show a loader while currentLatLng is null, and when it's no longer null, show your map.
Here's an example for 2
return MaterialApp(
home: new Scaffold(
body: currentLatLng == null ? Center(child:CircularProgressIndicator()) : GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(target: currentLatLng),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
),
);