Live Location (Flutter + Google Map)
Tags: livelocation, googlemaps, flutter
Published: 2020-06-27 08:41:30

---
title: Live Location (Flutter + Google Map)
published: true
date: 2020-05-29 09:55:16 UTC
tags: livelocation,googlemaps,flutter
canonical_url: https://medium.com/innovation-incubator/live-location-flutter-google-map-8b7c1b0092a8
---

![](https://cdn-images-1.medium.com/max/1024/1*vPV4p633KBi90VWAgiqCDA.png)

#### 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.

![](https://cdn-images-1.medium.com/max/418/1*Kdzbn1xo2OqS-BK09V9Ssw.png)

- Get an API key at [https://cloud.google.com/maps-platform/](https://cloud.google.com/maps-platform/) and enable Google Map SDK. find detailed steps [here](https://developers.google.com/maps/gmp-get-started).
- 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.

![](https://cdn-images-1.medium.com/max/378/1*EkOtd2iYOiOOilxunBQRDg.png)

- 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](https://pub.dev/packages/google_maps_flutter) **location plugin:** [https://pub.dev/packages/location](https://pub.dev/packages/location)

**Enjoy Coding ……………!**

* * *