Tanta Innovative LogoTanta Innovative Logo
  1. Home
  2. How To Guides And Tutorials
  3. Getting Started With Google Maps In Flutter
tanta innovative logo

Lekki Peninsular, 104106 Lagos, Nigeria

+234 201-453-6000

hello@tantainnovatives.com
Become our AgentPrivacy PolicyTerms of Service
DMCA.com Protection Status

© 2025 Tanta Innovative. All Rights Reserved.

ISO Certification
  1. Home
  2. How To Guides And Tutorials
  3. Getting Started With Google Maps In Flutter

Getting Started with Google Maps in Flutter

Omokehinde Igbekoyi

Omokehinde Igbekoyi

· 3 min read min read

0

0

Getting Started with Google Maps in Flutter

TypeScript
1dependencies:
2  flutter:
3    sdk: flutter
4  google_maps_flutter: ^2.5.0  # Latest version as of writing

TypeScript
1<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

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

TypeScript
1import UIKit
2import Flutter
3import GoogleMaps
4
5@UIApplicationMain
6@objc class AppDelegate: FlutterAppDelegate {
7  override func application(
8    _ application: UIApplication,
9    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
10  ) -> Bool {
11    GMSServices.provideAPIKey("YOUR-API-KEY-HERE")
12    GeneratedPluginRegistrant.register(with: self)
13    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
14  }
15}
TypeScript
1<key>io.flutter.embedded_views_preview</key>
2<true/>

TypeScript
1import 'package:flutter/material.dart';
2import 'package:google_maps_flutter/google_maps_flutter.dart';
3
4class MapScreen extends StatefulWidget {
5  @override
6  _MapScreenState createState() => _MapScreenState();
7}
8
9class _MapScreenState extends State<MapScreen> {
10  GoogleMapController? mapController;
11  
12  // Starting camera position
13  final LatLng _center = const LatLng(45.521563, -122.677433);
14
15  void _onMapCreated(GoogleMapController controller) {
16    mapController = controller;
17  }
18
19  @override
20  Widget build(BuildContext context) {
21    return Scaffold(
22      appBar: AppBar(
23        title: Text('My First Map!'),
24      ),
25      body: GoogleMap(
26        onMapCreated: _onMapCreated,
27        initialCameraPosition: CameraPosition(
28          target: _center,
29          zoom: 11.0,
30        ),
31      ),
32    );
33  }
34}

Loading comments...
Omokehinde Igbekoyi

Omokehinde Igbekoyi

0 Articles

Engineering lead

Related Articles

Discover more insights and stories from our collection of articles

Integrating Spotify in Android Apps: Web API + SDK Tutorial 2025
How To Guides And Tutorials9 min read min read

Integrating Spotify in Android Apps: Web API + SDK Tutorial 2025

Learn how to integrate Spotify's Web API and SDK into your Android app to add music streaming, user data, and playlist features—perfect for unique portfolio projects.

Olisemeka Nwaeme
Olisemeka Nwaeme·July 5, 2025
Getting started with the LLAMA 3.2-11B with groq
How To Guides And Tutorials3 min read min read

Getting started with the LLAMA 3.2-11B with groq

The LLAMA 3.2-11B model is a very powerful model that can perform both text and vision tasks.

Omolayo Timothy Ipinsanmi
Omolayo Timothy Ipinsanmi
Streamline Your Backend Workflow with Reusable Components
How To Guides And Tutorials6 min read min read

Streamline Your Backend Workflow with Reusable Components

Learn how backend developers can save time by creating reusable components for common tasks, streamlining project setups, improving consistency, and boosting productivity.

Meshach Philips
Meshach Philips
View More Articles
Hey there, Flutter developer! Ready to add some awesome maps to your app? I'll walk you through setting up Google Maps in your Flutter project, step by step. Don't worry - it might look tricky at first, but I'll make it super simple to follow along!
First things first - we need to get you an API key from Google. Here's how:
Pro Tip
: Keep your API key safe and never share it publicly!
Now, let's get your Flutter project ready. Open your
pubspec.yaml
file and add the Google Maps package:
Run
flutter pub get
to install the package.
swift
Copy
Now for the fun part - let's create a basic map! Here's a simple example:
Now that you've got your basic map working, you can:
If you run into any issues, check out:
Happy mapping!
What We'll Cover
1. Getting Your Google Maps API Key
2. Setting Up Your Flutter Project
3. Platform-Specific Setup
Android Setup
iOS Setup
4. Creating Your First Map!
Common Issues and Solutions
What's Next?
Need Help?
  • Getting your Google Maps API key
  • Setting up your Flutter project
  • Adding the necessary configurations
  • Creating your first map!
  • Head over to the
  • Create a new project (or select an existing one)
  • Enable the Maps SDK for Android and iOS
  • Create credentials (API key)
  • Copy your new API key - we'll need it soon!
  • Open android/app/src/main/AndroidManifest.xml
  • Add this permission before the <application> tag:
  • Add your API key within the <application> tag:
  • Open ios/Runner/AppDelegate.swift (create it if it doesn't exist)
  • Add this code:
  • Open ios/Runner/Info.plist and add:
  • Black screen? Double-check your API key is correctly added in both platforms
  • Map not showing? Make sure you have an active internet connection
  • Permissions error? Verify you've added all required permissions in the manifest
  • Add markers
  • Draw polygons
  • Implement custom map styles
  • Add user location
  • Create custom map controllers
  • Stack Overflow with the tags [flutter] and [google-maps]
  • Google Cloud Console
    Flutter Google Maps package documentation
    Google Maps Platform documentation