CODEWITHSUNDEEP
google-mapsflutterflutter-layout
Rashad Naghiyev
Rashad Naghiyev

Reputation: 21

How to customize myLocationEnabled button on Google Maps?

I need to create a button which is going to show me the current location of the user. That's why I use Google Maps, which have the options such this one. But, I need to customize the MyLocation Button but don't know how to do it. Could you please help me with this?

I am pretty new in Flutter though :D

Upvotes: 0

Views: 5029

Answers (1)

mirkancal
mirkancal

Reputation: 5345

I couldn't find easy way of doing it, but since everything is widget in flutter, you can put your google maps in your stack, and add iconbutton or whatever custom button you need to your stack.

GoogleMap(
                      onMapCreated: _onMapCreated,
                      initialCameraPosition:
                          CameraPosition(target: LatLng(0.0, 0.0)),
                      markers: markers,
                    ),
                    IconButton(
                      icon: Icon(Icons.battery_charging_full),
                      onPressed: () async {
                        final center = await getUserLocation();
                        getNearbyPlaces(center);
                        Marker myPosition = Marker(
                            markerId: MarkerId('myLocation'),
                            position: center == null
                                ? LatLng(0, 0)
                                : LatLng(center.latitude, center.longitude),
                            icon: BitmapDescriptor.fromAsset(
                                'assets/logo.png'));
                        setState(() {
                          markers.add(myPosition);
                        });
                      },
                    ),
                  ],
                )

So what I'm doing here is basicly,

I have Stack which helps me put a IconButton over GoogleMap. When user presssed on that button, I add a new Marker to show current position, There is a Set of Markers on my State, called markers, I'm creating a new Marker by getting the current location of the user, and adding a custom icon to that marker, and then add it to my markers(Set), to display it on GoogleMap.

my getUserLocation function:

  Future<LatLng> getUserLocation() async {
    LocationManager.LocationData currentLocation;
    final location = LocationManager.Location();
    try {
      currentLocation = await location.getLocation();
      final lat = currentLocation.latitude;
      final lng = currentLocation.longitude;
      final center = LatLng(lat, lng);
      return center;
    } on Exception {
      currentLocation = null;
      return null;
    }
  }

I have location: ^2.1.0 package and using it as LocationManager import 'package:location/location.dart' as LocationManager;

Upvotes: 2

Related Questions