Live Location (Flutter + Google Map)

Integrating Google Map

To get started we need to first add Google Maps in our flutter application. This is done with the help of a Flutter plugin google_maps_flutter for integrating Google Maps in iOS and Android applications.

• Add google_maps_flutter as a dependency in your pubspec.yaml file.

• Get an API key at https://cloud.google.com/maps-platform/ and enable Google Map SDK. find detailed steps here.
• Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR API KEY"/>

• import the package and you can now add a GoogleMap widget to your widget tree.

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: 'Demo',
      home: MapSample(),
    );
  }
}
class MapSample extends StatefulWidget {
@override
_MapSampleState createState() => _MapSampleState();
}
class _MapSampleState extends State<MapSample> {
GoogleMapController mapController;
LatLng _initialPosition = LatLng(37.42796133588664, -122.885740655967);
void _onMapCreated(GoogleMapController _cntrl) async {
mapController = await _cntrl;
}
return Scaffold(
  appBar: AppBar(
  backgroundColor: Color(0xff2758a1),
  title: Text('Demo'),
  ),
  body: Stack(
    children: <Widget>[
    GoogleMap(
      initialCameraPosition: CameraPosition(target: _initialPosition, zoom: 10),
      mapType: MapType.normal,
      onMapCreated: _onMapCreated,
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
      zoomControlsEnabled: false,
      )
     ],
   ),
 );
}

Implementing live location

To implement live location we need to add Flutter Location Plugin . It's a Flutter plugin to easily handle a realtime location in iOS and Android.

• Add Flutter Location Pluginas a dependency in your file.

• import the package with

import 'package:location/location.dart';

• now we will make use of a listener to get continuous callbacks whenever the device position is changing.

Location location = new Location();
location.onLocationChanged.listen((LocationData currentLocation) {
  // Use current location
});

• now let’s add this listener on our _onMapCreated Function with the functionality to animate the camera to each change in the device position.

void _onMapCreated(GoogleMapController _cntrl) async {
mapController = await _cntrl;
locationSubscription = _location.onLocationChanged.listen((l)  {
  mapController.animateCamera(
    CameraUpdate.newCameraPosition(
      CameraPosition(target: LatLng(l.latitude, l.longitude),zoom: 18)),
);
}

Final code

void mai() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: MapSample(),
    );
  }
}
class MapSample extends StatefulWidget {
@override
_MapSampleState createState() => _MapSampleState();
}
class _MapSampleState extends State<MapSample> {
GoogleMapController mapController;
Location location = new Location();
LatLng _initialPosition = LatLng(37.42796133588664, -122.885740655967);
void _onMapCreated(GoogleMapController _cntrl) async {
mapController = await _cntrl;
locationSubscription = _location.onLocationChanged.listen((l)  {
  mapController.animateCamera(
    CameraUpdate.newCameraPosition(
      CameraPosition(target: LatLng(l.latitude, l.longitude),zoom: 18)),
);
}
return Scaffold(
  appBar: AppBar(
  backgroundColor: Color(0xff2758a1),
  title: Text('Demo'),
  ),
  body: Stack(
    children: <Widget>[
    GoogleMap(
      initialCameraPosition: CameraPosition(target: _initialPosition, zoom: 10),
      mapType: MapType.normal,
      onMapCreated: _onMapCreated,
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
      zoomControlsEnabled: false,
      )
     ],
   ),
 );
}

Reference

Google Map plugin: https://pub.dev/packages/google_maps_flutter location plugin: https://pub.dev/packages/location

Enjoy Coding ……………!