Flutter Google Maps

A map is used to get information about the world simply and visually. It presents the world places by showing its shape and sizes, locations and distance between them. We can add a map in our application with the use of the Google Maps Flutter plugin. This plugin can automatically access the Google Maps servers, map display, and respond to user gestures. It also allows us to add markers to our map.

Why use Google Maps with Flutter?

Flutter developers prefer Google Maps for their application because they provide native performance for android and iOS both. It allows us to implement the code one time and permit them to run the code for both devices (android and iOS). Google Maps Flutter plugin is provided in the Google Map widget that supports initialCameraPosition, maptype and onMapCreated. We can set the position of the camera and marker in any place on the earth. We can design the marker according to our choice. It also comes with a zoom property in a cameraposition to provide the zooming in google map view on the initial page.

Let us see step by step to how to add Google Maps in Flutter application.

Step 1: Create a new project. Open this project in the IDE, navigate to the lib folder, and then open the pubspec.yaml file for setting the map.

Step 2: In pubspec.yaml file, we need to add the Google Maps Flutter plugin in the dependency section, which is available as google_maps_flutter on pub.dartlang.org. After adding a dependency, click on the get package link to import the library in the main.dart file.

1. dependencies:    
2.   flutter:    
3.     sdk: flutter    
4.   cupertino_icons: ^0.1.2    
5.   google_maps_flutter: ^0.5.21  

It ensures that we have left two spaces from the left side of a google_maps_flutter dependency while adding the dependencies.

Step 3: The next step is to get an API key for your project. If we are using an Android platform, then follow the instructions given on Maps SDK for Android: Get API Key. After creating the API key, add it to the application manifest file. We can find this file by navigating to android/app/src/main/AndroidManifest.xml as follows:

1. <manifest ...  
2.   <application ...  
3.     <meta-data android:name="com.google.android.geo.API_KEY"  
4.                android:value="YOUR ANDROID API KEY HERE"/>   

Step 4: Next, import the package in the dart file as below:

1. import 'package:google_maps_flutter/google_maps_flutter.dart';  

Step 5: Now, we are ready to add a GoogleMap widget to start creating a UI to display the map.

Example

Let us understand it with the help of an example.

1. import 'package:flutter/material.dart';  
2. import 'package:google_maps_flutter/google_maps_flutter.dart';  
3.   
4. void main() => runApp(MyApp());  
5.   
6. class MyApp extends StatefulWidget {  
7.   @override  
8.   _MyAppState createState() => _MyAppState();  
9. }  
10.   
11. class _MyAppState extends State<MyApp> {  
12.   GoogleMapController myController;  
13.   
14.   final LatLng _center = const LatLng(45.521563, -122.677433);  
15.   
16.   void _onMapCreated(GoogleMapController controller) {  
17.     myController = controller;  
18.   }  
19.   
20.   @override  
21.   Widget build(BuildContext context) {  
22.     return MaterialApp(  
23.       home: Scaffold(  
24.         appBar: AppBar(  
25.           title: Text('Flutter Maps Demo'),  
26.           backgroundColor: Colors.green,  
27.         ),  
28.         body: Stack(  
29.           children: <Widget>[  
30.             GoogleMap(  
31.               onMapCreated: _onMapCreated,  
32.               initialCameraPosition: CameraPosition(  
33.                 target: _center,  
34.                 zoom: 10.0,  
35.               ),  
36.             ),  
37.             Padding(  
38.               padding: const EdgeInsets.all(14.0),  
39.               child: Align(  
40.                 alignment: Alignment.topRight,  
41.                 child: FloatingActionButton(  
42.                   onPressed: () => print('You have pressed the button'),  
43.                   materialTapTargetSize: MaterialTapTargetSize.padded,  
44.                   backgroundColor: Colors.green,  
45.                   child: const Icon(Icons.map, size: 30.0),  
46.                 ),  
47.               ),  
48.             ),  
49.           ],  
50.         ),  
51.       ),  
52.     );  
53.   }  
54. }  

In the above code, we have noticed these terms:

mapController: It is similar to other controllers that we had seen in Flutter. It controls all activities on the GoogleMap class. Here, it manages the camera function, such as position, animation, zooming, etc.

onMapCreated: It is a method called for creating a map and takes a MapController as an argument.

initialCameraPosition: It is a required parameter that sets the camera position from where we want to start. It allows us to set which part of the world we want to point on the map.

stack: It is used to place other Flutter widgets on top of the map widget.

Output:

When we run the app, it should return the UI of the screen as below screenshot:

How to change the map appearance?

We can change the map appearance such as normal view, satellite view, etc. using mapType property. This property allows developers to display the type of map tiles. The GoogleMap widget offers mainly five types of tiles, which are given below:

• none: It does not display any map tiles.
• normal: It displays the tiles on the map with traffic, labels and subtle terrain information.
• satellite: It displays the satellite image (aerial photos) of the location.
• terrain: It displays the specific physical features of an area of land (indicates type and height of terrain).
• hybrid: It displays the satellite images with some labels or overlays.

We can do this by creating a variable _currentMapType in the above code to display the current map type and then add mapType: _currentMapType to the GoogleMap widget.

1. MapType _currentMapType = MapType.normal;  
2.   
3. @override  
4. Widget build(BuildContext context) {  
5.   return MaterialApp(  
6.     GoogleMap(  
7.       mapType: _currentMapType,  
8.     ),  
9.   );  
10. }   

Next, we have to add a method to modify the value of _currentMapType inside a setState() function call. This method will update the map appearance for matching with the new value of _currentMapType variable.

1. void _onMapTypeButtonPressed() {  
2.   setState(() {  
3.     _currentMapType = _currentMapType = = MapType.normal  
4.         ? MapType.satellite  
5.         : MapType.normal;  
6.   });  
7. }  

Finally, replace the onPressed property with _onMapTypeButtonPressed.

1. child: FloatingActionButton(  
2.   onPressed: _onMapTypeButtonPressed  
3. ),  

Let us see the complete code to change the map appearance. Open the dart file and replace it with the below code:

1. import 'package:flutter/material.dart';  
2. import 'package:google_maps_flutter/google_maps_flutter.dart';  
3.   
4. void main() => runApp(MyApp());  
5.   
6. class MyApp extends StatefulWidget {  
7.   @override  
8.   _MyAppState createState() => _MyAppState();  
9. }  
10.   
11. class _MyAppState extends State<MyApp> {  
12.   GoogleMapController myController;  
13.   
14.   final LatLng _center = const LatLng(45.521563, -122.677433);  
15.   
16.   MapType _currentMapType = MapType.normal;  
17.   
18.   void _onMapTypeButtonPressed() {  
19.     setState(() {  
20.       _currentMapType = _currentMapType == MapType.normal  
21.           ? MapType.satellite  
22.           : MapType.normal;  
23.     });  
24.   }  
25.   
26.   void _onMapCreated(GoogleMapController controller) {  
27.     myController = controller;  
28.   }  
29.   
30.   @override  
31.   Widget build(BuildContext context) {  
32.     return MaterialApp(  
33.       home: Scaffold(  
34.         appBar: AppBar(  
35.           title: Text('Flutter Maps Demo'),  
36.           backgroundColor: Colors.green,  
37.         ),  
38.         body: Stack(  
39.           children: <Widget>[  
40.             GoogleMap(  
41.               onMapCreated: _onMapCreated,  
42.               initialCameraPosition: CameraPosition(  
43.                 target: _center,  
44.                 zoom: 10.0,  
45.               ),  
46.               mapType: _currentMapType  
47.             ),  
48.             Padding(  
49.               padding: const EdgeInsets.all(14.0),  
50.               child: Align(  
51.                 alignment: Alignment.topRight,  
52.                 child: FloatingActionButton(  
53.                   onPressed: _onMapTypeButtonPressed,  
54.                   materialTapTargetSize: MaterialTapTargetSize.padded,  
55.                   backgroundColor: Colors.green,  
56.                   child: const Icon(Icons.map, size: 30.0),  
57.                 ),  
58.               ),  
59.             ),  
60.           ],  
61.         ),  
62.       ),  
63.     );  
64.   }  
65. }  

Output:

When we run the app, it should return the UI of the screen as below screenshot:

If we click on the map icon, we will get the satellite image of our specified location. See the below image:

How to add a marker on the map?

A marker identifies the location on the map. We can add a marker on a map by using the markers property inside the GoogleMap widget. Generally, the marker is shown when we move our camera from one location to another. For example, if we want to move from Poland to California, we can see a marker on that particular location when the camera moves to California.

We can add a marker by creating a variable _markers that will store the map's markers and then set this variable as the markers property in the GoogleMap widget.

1. final Set<Marker> _markers = {};  
2. @override  
3. Widget build(BuildContext context) {  
4.   return MaterialApp(  
5.     GoogleMap(  
6.       markers: _markers,  
7.     ),  
8.   );  
9. }  

Next, it is required to track the current camera position on the map by adding the below code:

1. LatLng _currentMapPosition = _center;  
2.   
3. void _onCameraMove(CameraPosition position) {  
4.   _currentMapPosition = position.target;  
5. }  
6.   
7. @override  
8. Widget build(BuildContext context) {  
9.   return MaterialApp(  
10.     GoogleMap(  
11.       onCameraMove: _onCameraMove,  
12.     ),  
13.   );  
14. }   

Finally, we need to add a marker in the map by modifying the _markers inside a setState() function call.

1. void _onAddMarkerButtonPressed() {  
2.   setState(() {  
3.     _markers.add(Marker(  
4.       markerId: MarkerId(_lastMapPosition.toString()),  
5.       position: _currentMapPosition,  
6.       infoWindow: InfoWindow(  
7.         title: 'Nice Place'  
8.       ),  
9.       icon: BitmapDescriptor. defaultMarkerWithHue(BitmapDescriptor.hueViolet)  
10.     ));  
11.   });  
12. }  

Let us see the complete code to add marker to the map. Open the dart file and replace it with the below code:

1. import 'package:flutter/material.dart';  
2. import 'package:google_maps_flutter/google_maps_flutter.dart';  
3.   
4. void main() => runApp(MyApp());  
5.   
6. class MyApp extends StatefulWidget {  
7.   @override  
8.   _MyAppState createState() => _MyAppState();  
9. }  
10.   
11. class _MyAppState extends State<MyApp> {  
12.   GoogleMapController mapController;  
13.   static final LatLng _center = const LatLng(45.521563, -122.677433);  
14.   final Set<Marker> _markers = {};  
15.   LatLng _currentMapPosition = _center;  
16.   
17.   void _onAddMarkerButtonPressed() {  
18.     setState(() {  
19.       _markers.add(Marker(  
20.         markerId: MarkerId(_currentMapPosition.toString()),  
21.         position: _currentMapPosition,  
22.         infoWindow: InfoWindow(  
23.           title: 'Nice Place',  
24.           snippet: 'Welcome to Poland'  
25.         ),  
26.         icon: BitmapDescriptor.defaultMarker,  
27.       ));  
28.     });  
29.   }  
30.   
31.   void _onCameraMove(CameraPosition position) {  
32.     _currentMapPosition = position.target;  
33.   }  
34.   
35.   void _onMapCreated(GoogleMapController controller) {  
36.     mapController = controller;  
37.   }  
38.   
39.   @override  
40.   Widget build(BuildContext context) {  
41.     return MaterialApp(  
42.       home: Scaffold(  
43.         appBar: AppBar(  
44.           title: Text('Flutter Maps Demo'),  
45.           backgroundColor: Colors.green,  
46.         ),  
47.         body: Stack(  
48.           children: <Widget>[  
49.             GoogleMap(  
50.               onMapCreated: _onMapCreated,  
51.               initialCameraPosition: CameraPosition(  
52.                 target: _center,  
53.                 zoom: 10.0,  
54.               ),  
55.               markers: _markers,  
56.               onCameraMove: _onCameraMove  
57.             ),  
58.             Padding(  
59.               padding: const EdgeInsets.all(14.0),  
60.               child: Align(  
61.                 alignment: Alignment.topRight,  
62.                 child: FloatingActionButton(  
63.                   onPressed: _onAddMarkerButtonPressed,  
64.                   materialTapTargetSize: MaterialTapTargetSize.padded,  
65.                   backgroundColor: Colors.green,  
66.                   child: const Icon(Icons.map, size: 30.0),  
67.                 ),  
68.               ),  
69.             ),  
70.           ],  
71.         ),  
72.       ),  
73.     );  
74.   }  
75. }  

Output:

Run the app, and we will get the UI of the screen as the first screenshot. When we click on the button, it displays the marker at the last location on the map. When we tapped the marker, the information is displayed that gives a title and snippet about the location.