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 ……………!
Top comments (0)