❖ Welcome to Param Classes!

Have you ever used Google Maps to find a restaurant, hospital, hotel or nearby shop? Location-based features are now common in mobile applications. They help users find places, track locations and navigate from one point to another.

Flutter makes it possible to add Google Maps and location services to your application. You can display an interactive map, show markers, get the user's current location and build location-based features.

For example:

• A food delivery app can show the delivery location.

• A taxi booking app can identify the pickup point.

• A hospital app can display nearby hospitals.

• A shopping app can show nearby stores.

• A travel app can display tourist destinations.

In this tutorial, you will learn how to integrate Google Maps into a Flutter application and retrieve the device's current location using the Geolocator package.

✦ 1. What Is Google Maps Integration in Flutter?

Google Maps integration allows developers to display an interactive Google Map inside a Flutter application.

Users can zoom, scroll, move around the map and view marked locations.

Some useful features include:

• Display an interactive map.

• Show the user's current location.

• Add custom map markers.

• Display shops, hotels and hospitals.

• Get latitude and longitude.

• Build location-based applications.

To use Google Maps, you need a Google Cloud project and an API key.

✦ 2. Create a Flutter Project

First, create a new Flutter project.

Open Android Studio or VS Code and run:

flutter create flutter_maps_app

Move into the project directory:

cd flutter_maps_app

Open the project in your code editor.

✦ 3. Create a Google Cloud Project and API Key

Before using Google Maps, configure the required Google Maps service.

Follow these steps:

1. Visit https://console.cloud.google.com/

2. Sign in with your Google account.

3. Create a new Google Cloud project.

4. Open the API Library.

5. Enable Maps SDK for Android.

6. If you plan to build an iOS application, also enable Maps SDK for iOS.

7. Open the Credentials section.

8. Create an API key.

<text>Important: Google Maps Platform may require billing to be enabled. Review its current pricing, quotas and usage policies before using the API in a production application.</text>

Keep your API key secure. Restrict it to the required application and APIs instead of using an unrestricted key.

Official documentation:

https://developers.google.com/maps/flutter-package/overview

✦ 4. Install Required Flutter Packages

We will use two packages.

1. google_maps_flutter

This package displays Google Maps inside a Flutter application.

2. geolocator

This package helps retrieve the device's current location and check location permissions.

Run these commands inside your Flutter project:

flutter pub add google_maps_flutter
flutter pub add geolocator

Then run:

flutter pub get

You can read the official package documentation here:

• Google Maps: https://pub.dev/packages/google_maps_flutter

• Geolocator: https://pub.dev/packages/geolocator

✦ 5. Configure Google Maps API Key for Android

Open this file:

android/app/src/main/AndroidManifest.xml

Inside the <application> element, add the Google Maps API key:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_GOOGLE_MAPS_API_KEY"/>

Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key.

For example, your manifest structure will look similar to this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <application
        android:label="flutter_maps_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_GOOGLE_MAPS_API_KEY"/>

        <activity
            android:name=".MainActivity"
            android:exported="true">

            <!-- Keep your existing activity configuration here -->

        </activity>

    </application>
</manifest>

Do not replace your complete manifest with this shortened example. Keep the existing activity configuration and other Flutter-generated entries.

✦ 6. Add Location Permissions

To access the device's location, Android needs location permissions.

Open:

android/app/src/main/AndroidManifest.xml

Add these permissions above the <application> element:

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

<uses-permission
    android:name="android.permission.ACCESS_COARSE_LOCATION"/>

These permissions allow the application to request precise or approximate location access.

The user must grant permission at runtime as well. Adding permissions to the manifest does not automatically grant access.

For iOS, configure the appropriate location usage descriptions in ios/Runner/Info.plist and add the Google Maps iOS API key according to the official package setup guide.

✦ 7. Create the Google Maps Screen

Now open:

lib/main.dart

Replace the code with the following example:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Google Maps',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const MapScreen(),
    );
  }
}

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController? mapController;

  LatLng currentLocation = const LatLng(
    21.2514,
    81.6296,
  );

  bool isLoading = false;

  Set<Marker> markers = {};

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

    markers.add(
      Marker(
        markerId: const MarkerId('initial_location'),
        position: currentLocation,
        infoWindow: const InfoWindow(
          title: 'Map Starting Location',
        ),
      ),
    );
  }

  Future<void> getCurrentLocation() async {
    setState(() {
      isLoading = true;
    });

    try {
      bool serviceEnabled =
          await Geolocator.isLocationServiceEnabled();

      if (!serviceEnabled) {
        throw Exception('Please enable location services');
      }

      LocationPermission permission =
          await Geolocator.checkPermission();

      if (permission == LocationPermission.denied) {
        permission = await Geolocator.requestPermission();
      }

      if (permission == LocationPermission.denied) {
        throw Exception('Location permission denied');
      }

      if (permission == LocationPermission.deniedForever) {
        throw Exception(
          'Location permission permanently denied. Enable it in app settings.',
        );
      }

      Position position =
          await Geolocator.getCurrentPosition();

      LatLng newLocation = LatLng(
        position.latitude,
        position.longitude,
      );

      setState(() {
        currentLocation = newLocation;

        markers = {
          Marker(
            markerId: const MarkerId('current_location'),
            position: newLocation,
            infoWindow: const InfoWindow(
              title: 'Your Current Location',
            ),
          ),
        };
      });

      mapController?.animateCamera(
        CameraUpdate.newLatLngZoom(
          newLocation,
          16,
        ),
      );
    } catch (e) {
      if (!mounted) return;

      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(e.toString()),
        ),
      );
    } finally {
      if (mounted) {
        setState(() {
          isLoading = false;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Maps in Flutter'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),

      body: Column(
        children: [
          Expanded(
            child: GoogleMap(
              initialCameraPosition: CameraPosition(
                target: currentLocation,
                zoom: 12,
              ),

              markers: markers,

              onMapCreated: (controller) {
                mapController = controller;
              },

              myLocationButtonEnabled: false,
              zoomControlsEnabled: true,
            ),
          ),

          Padding(
            padding: const EdgeInsets.all(16),

            child: SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                onPressed: isLoading
                    ? null
                    : getCurrentLocation,

                icon: const Icon(Icons.my_location),

                label: Text(
                  isLoading
                      ? 'Getting Location...'
                      : 'Get My Current Location',
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

✦ 8. Understand the Important Code

Let's understand the main parts of the application.

GoogleMap Widget

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: currentLocation,
    zoom: 12,
  ),
)

This displays the Google Map and sets its initial camera position.

LatLng

LatLng(21.2514, 81.6296)

LatLng represents a geographical location using latitude and longitude. The example coordinates are a starting point in Raipur, Chhattisgarh. They are not the device's live location.

Get Current Location

Position position =
    await Geolocator.getCurrentPosition();

This retrieves the device's current geographical position after location services and permissions have been checked.

Add a Marker

Marker(
  markerId: const MarkerId('current_location'),
  position: newLocation,
)

This adds a marker to the map at the retrieved location.

Move the Map Camera

mapController?.animateCamera(
  CameraUpdate.newLatLngZoom(newLocation, 16),
);

This smoothly moves the map to the selected location and changes the zoom level.

✦ 9. Run and Test Your Flutter Application

Follow these steps:

1. Add your Google Maps API key.

2. Enable the required Google Maps SDK.

3. Add location permissions.

4. Run flutter pub get.

5. Connect an Android device or start an emulator.

6. Run the Flutter application.

7. Check whether the map appears.

8. Tap Get My Current Location.

9. Allow location permission when requested.

10. Check whether the map moves to your current location.

For accurate location testing, use a device or emulator with location services enabled.

✦ 10. Common Google Maps Errors

Error 1: Google Map Is Not Displaying

Check your API key, billing configuration and whether Maps SDK for Android is enabled.

Error 2: API Key Not Authorized

Check the API key restrictions and make sure they match your Android application.

Error 3: Location Permission Denied

Ask the user to grant location permission. If permission is permanently denied, provide guidance to open the device's app settings.

Error 4: Current Location Not Found

Check whether the device's location service is enabled and whether the device has a usable location signal.

Error 5: Map Is Blank

Check the internet connection, API configuration, Google Play services availability and application logs.

✦ 11. Best Practices for Location-Based Apps

• Request location permission only when the feature needs it.

• Explain why location access is required.

• Allow users to continue when location permission is optional.

• Handle denied and permanently denied permissions.

• Use HTTPS when communicating with your backend.

• Restrict Google Maps API keys.

• Avoid collecting unnecessary location data.

• Do not store or share a user's location without an appropriate reason and consent.

• Test on different Android devices and screen sizes.

✦ 12. What You Learned

In this tutorial, you learned how to:

• Create a Flutter Google Maps project.

• Create a Google Cloud project.

• Configure a Google Maps API key.

• Install Google Maps and Geolocator packages.

• Add Android location permissions.

• Display an interactive Google Map.

• Get the current device location.

• Display a location marker.

• Move the map camera to the current location.

• Troubleshoot common map and location errors.

❖ Conclusion

Google Maps and location services are useful features for building modern mobile applications. By combining Google Maps Flutter and Geolocator, you can display maps, retrieve geographical coordinates and create location-based features.

At Param Classes, we focus on practical programming lessons that help beginners understand real-world application development. Try extending this project by adding nearby shops, hospitals, restaurants or multiple map markers.

Learn Today, Grow Tomorrow – Param Classes.