Posted on Jun 27, 2020 • Originally published at Medium on May 29, 2020

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, ) ], ), ); }