How to Integrate Google Maps in Flutter Applications?
Last Updated :
22 Jul, 2022
We all have seen that Google Maps is used by many applications such as Ola, Uber, Swiggy, and others. We must set up an API project with the Google Maps Platform in order to integrate Google Maps into our Flutter application. In this article, we will look at How to Integrate Google Maps in Flutter Applications?
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Generating API Key for Using Google Maps
Check out the below article on How to generate an API key for using Google Maps. After developing that key we have to use it within our project to integrate Google Maps.
Now, follow the Steps to Implement Google Maps in the Flutter Application
Step 3: Adding Dependency to pubspec.yaml File
dependencies:
flutter:
google_maps_flutter: ^2.1.8
Now click on pub.get to configure.
Step 4: Update build.gradle File.
Navigate to android>app>build.gradle file and update code on below line.
Change Compile SDK Version
android {
compileSdkVersion 31
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
Change Min SDK Version
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.google_maps"
minSdkVersion 20
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
Step 5: Add API Key to Android Manifest File
Navigate to android > app > src > main > AndrodManifest.xml file and add the below code in the manifest tag. Make sure to add your Google Maps API key in the value.
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="Enter your API key here"/>
Step 6: Working with main.dart File.
Navigate to lib > main.dart file and add the below code to it. Comments are added in the code to get to know in detail.
Dart
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GFG' ,
debugShowCheckedModeBanner: false ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
|
Step 7: Creating a new Dart File for Home Page.
Navigate to lib > Right click on it > New > Dart File and name it as HomePage.dart. After creating that file add the below code to it. Comments are added in the code to get to know in detail.
Dart
import 'dart:async' ;
import 'package:flutter/material.dart' ;
import 'package:google_maps_flutter/google_maps_flutter.dart' ;
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGoogle = const CameraPosition(
target: LatLng(37.42796133580664, -122.885749655962),
zoom: 14.4746,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0F9D58),
title: Text( "Google Maps" ),
),
body: Container(
child: GoogleMap(
initialCameraPosition: _kGoogle,
mapType: MapType.normal,
myLocationEnabled: true ,
compassEnabled: true ,
onMapCreated: (GoogleMapController controller){
_controller.complete(controller);
},
),
)
);
}
}
|
Output :
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...