Google Maps in Flutter | Easy Integration

Google Maps in Flutter | Easy Integration

Google Maps in Flutter is a very easy process to do with the help of the google_maps_flutter plugin. In this article, we will look at how to integrate Google Maps with the Flutter App in 4 simple steps.

Note: Google Maps Flutter is still in developer preview(It cannot be released to the app store yet). Make sure to wait for the stable release before releasing.

The main pre-requisite is to have a google cloud platform account. If you do not have one, create it here – Google Cloud Platform

Once done, log in to the console and follow the steps below to create a simple API key for the Google Maps SDK

Step 1 – Create API Key for Google Maps SDK

Make sure to log in and choose the 2nd API from the list(Maps SDK for Android). Since we are writing this article specific to android, make sure to do this as the first step.

Google API List
Google API List

Enable the API by clicking the button given.

Enable the API
Enable the API

Once enabled, choose the credentials button on the top bar and choose the credentials tab like below.

Credentials Tab in Maps SDK
Credentials Tab in Maps SDK

Choose the Create credentials button and create a basic API key to use in the further sections.

Create Credentials
Create Credentials

Once this is done, do not disclose the API key to anyone at any point since this is a private key to be used specifically to be used for your application’s Maps only.

Step 2 – Preparing the Google Maps in Flutter App

Once the Google Maps SDK is enabled with a Credential/API key, time to use it in our Flutter App. As a pre-requisite, fill out the following places with the key.

For Android

Go to the android>app>src>main>Androidmanifest.xml and make sure that the Manifest looks like below,

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

Where the YOUR KEY HERE is replaced with the API key we generated in Step 1

For IOS

Similarly for IOS as well, make sure to edit the Appdelegate.m file like below.

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Where, YOUR KEY HERE is replaced with the API key we generated in Step 1

Step 3 – GoogleMaps Widget

With Step 1 & 2 completed, time to look at how to bring the Maps inside the Flutter Application. To begin with, add the dependency in the pubspec.yaml file like given below.

dependencies: 
 google_maps_flutter: ^0.5.21

Do packages get and add import the following package to the main.dart file.

import ‘package:google_maps_flutter/google_maps_flutter.dart’;
Once these two are done, time to look at the Widgets that this package provides.

GoogleMap

GoogleMap Widget provides the main control over providing Google Maps inside the Flutter Application. There are several important attributes that are part of this Widget which will help in creating the Maps we require. They are

  • mapType – This attribute defines what type of Map is to be shown. There are options to show either satellite, hybrid, normal. Choose either of these by giving the value as MapType.hybrid etc.
  • initialCameraPosition – The initial camera position is important to render the Map on the Flutter UI. This will move the camera position from this point only. To give the initial Camera position, create a variable with the CameraPosition class as its value. To know more about the CameraPosition see the next sub-section.
  • onMapCreated – This is a callback that gets fired whenever the camera position is changed. Since the user can move the Map by either pinching or swiping the map, this will get fired every single time. In case there is a use case to move the camera angle programmatically, you will have to make use of the GoogleMapController which we will see in the next sub-section.
GoogleMapController

This class provides control of the GoogleMap itself by creating an instance of it. Since there is no explicit way of changing the camera position of the google map, we will be using this GoogleMapController to control all sorts of activities on the GoogleMap class. To know more about how we can use the Google Map Controller see the Next section for the example application.

CameraPosition

CameraPosition class provides the required camera position values that will be required to show any position on the GoogleMap.

CameraPosition initPosition = CameraPosition( 
target: LatLng(14.5, 25.7), zoom: 7, );

The CameraPosition class takes in various attributes like target, zoom, etc. The Target attribute marks the Latitude & Longitude position on the Google Map. This class takes in a double value like LatLng(double, double) to mark it at that position.

To know more about how we make use of this CameraPosition, check the next section for the example application.

Step 4 – Creating GoogleMaps – Example App

With the 3 steps completed, find the final app example below. This example creates an animated camera transition on Google Maps when it is created. This is a very useful way to provide Google Maps in Flutter Application.

Do not forget to check out the final section for the example output of this App.

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(GoogleMapApp());

class GoogleMapApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample GoogleMap Widget',
home: GoogleMapWidget(),
);
}
}

class GoogleMapWidget extends StatefulWidget {
GoogleMapWidget({Key key}) : super(key: key);

@override
_GoogleMapWidgetState createState() => _GoogleMapWidgetState();
}

class _GoogleMapWidgetState extends State {

Completer _controller = Completer();

@override
void initState() {
super.initState();
}

CameraPosition initPosition = CameraPosition(
target: LatLng(14.5, 25.7),
zoom: 7,
);

void updateGoogleMap()
async{
GoogleMapController cont = await _controller.future;
setState(() {
CameraPosition newtPosition = CameraPosition(
target: LatLng(14.5, 28.7),
zoom: 4,
);
cont.animateCamera(CameraUpdate.newCameraPosition(newtPosition));
});

}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.black45,
title: Text("Update Google Map"),
),
body: Center(
child: Column(
children: [
Container(
height: 400.0,
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: initPosition,
onMapCreated: (GoogleMapController controller){
_controller.complete(controller);
},
),
),
FlatButton(
child: Text("Update Map", style: TextStyle(color: Colors.white),),
color: Colors.deepOrange,
onPressed: (){
updateGoogleMap();
},
)
],
),
));
}
}

 

Google Maps – Conclusion

For the example App code above, the Flutter App looks like,

Google Maps in Flutter
Google Maps in Flutter
Google Maps in Flutter
Google Maps in Flutter

This is easy to create once the API key is integrated. However, note that this Widget is still in developer preview and is not going to be present in the stable branch until the next major update. Make sure to keep tabs on the Flutter Dev releases to know more about this Google Maps in Flutter.

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *