Google Map with Current Location in Flutter


Add following plugins in pubspec.yaml file:

google_maps_flutter: ^2.0.3
location: ^4.1.1
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:location/location.dart';

void main() {
  runApp(MaterialApp(
    home: MyGoogle(),
    title: "Google Map Tutorial",
  ));
}

class MyGoogle extends StatefulWidget {
  @override
  _MyGoogleState createState() => _MyGoogleState();
}

class _MyGoogleState extends State<MyGoogle> {
  var maptype = MapType.normal;
  Set<Marker> _markers = {};
  Location location = Location();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Google Map Tutorial"),
      ),
      body: Container(
        child: Stack(
          children: [
            GoogleMap(
              initialCameraPosition: CameraPosition(
                target: LatLng(28.7041, 77.1025),
                zoom: 18,
              ),
              mapType: maptype,
              onTap: (currentTapLocation) => print(
                  "The Current Position is : ${[
                currentTapLocation.latitude,
                currentTapLocation.longitude
              ]}"),
              markers: _markers,
              myLocationEnabled: true,
              /*onMapCreated: (controller) {
                setState(() {
                  _markers.add(
                    Marker(
                      markerId: MarkerId("First Id"),
                      position: LatLng(28.7041, 77.1025),
                      infoWindow: InfoWindow(
                        title: "Institute",
                        snippet: "Education Center",
                      ),
                    ),
                  );
                });
              },*/
              onMapCreated: _onMapCreated,
            ),
            Align(
              alignment: Alignment.topRight,
              child: Card(
                margin: EdgeInsets.all(5),
                elevation: 10,
                color: Colors.black45,
                child: ButtonBar(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    IconButton(
                      onPressed: () {
                        setState(() {
                          maptype = MapType.satellite;
                        });
                      },
                      icon: Icon(
                        Icons.map,
                        color: Colors.white,
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        setState(() {
                          maptype = MapType.terrain;
                        });
                      },
                      icon: Icon(
                        Icons.map_outlined,
                        color: Colors.white,
                      ),
                    ),
                    IconButton(
                      onPressed: () {
                        setState(() {
                          maptype = MapType.hybrid;
                        });
                      },
                      icon: Icon(
                        Icons.maps_ugc,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  GoogleMapController googleMapController;
  var locationSubs;

  void _onMapCreated(GoogleMapController googleMapController) async {
    print("Call this method...");
    this.googleMapController = await googleMapController;
    locationSubs = location.onLocationChanged.listen((currentLocation) {
      googleMapController.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: LatLng(
              currentLocation.latitude,
              currentLocation.longitude,
            ),
            zoom: 16,
          ),
        ),
      );
      setState(() {
        _markers.add(
          Marker(
            markerId: MarkerId("First Id"),
            position:
                LatLng(currentLocation.latitude, currentLocation.longitude),
            infoWindow: InfoWindow(
              title: "Institute",
              snippet: "Education Center",
            ),
          ),
        );
      });
    });
  }
}

1 comment: