Flutter Google Maps Integration – Ultimate Guide with Custom Markers

Introduction

Adding maps to your Flutter app can significantly enhance the user experience. Whether you’re building a delivery app, travel app, or any location-based service, Flutter Google Maps Integration allows you to embed interactive maps quickly and efficiently. With custom markers, polylines, and circles, you can make your app more intuitive and engaging for users.

Why Use Google Maps in Getting a Google Maps API Key

  • Cross-platform support: Works on both Android and iOS with a single codebase.
  • Customizable markers and overlays: Highlight locations with unique icons, routes, or zones.
  • Interactive features: Zoom, pan, tap markers, and even integrate real-time location.
  • Rich ecosystem: Easily combine with Firebase, Geolocator, or other packages for dynamic map features.

Prerequisites

Before starting, ensure you have:

👉 Flutter installed (latest stable version)
👉 IDE like VS Code or Android Studio
👉 Basic Flutter knowledge
👉 A Google Maps API key

Step 1: Setting Up Google Maps in Flutter

  1. Add the dependency
dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.3.0

Run:

flutter pub get
  1. Get a Google Maps API Key
  • Go to Google Cloud Console
  • Create a project, enable Maps SDK for Android & iOS
  • Generate an API key and restrict it
  1. Configure Android & iOS
  • Android: Add API key to android/app/src/main/AndroidManifest.xml
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>
  • iOS: Add API key in ios/Runner/AppDelegate.swift
GMSServices.provideAPIKey("YOUR_API_KEY")

Tip: Always restrict API keys to your app to prevent unauthorized usage.

Step 2: Displaying a Basic Map

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

class MapScreen extends StatelessWidget {
  final CameraPosition _initialPosition = CameraPosition(
    target: LatLng(37.7749, -122.4194), // San Francisco
    zoom: 12,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter Google Maps Integration")),
      body: GoogleMap(
        initialCameraPosition: _initialPosition,
      ),
    );
  }
}

Pro tip: You can animate the camera to focus on a location dynamically for better UX.

Step 3: Adding Markers

Markers help highlight locations:

Set<Marker> _markers = {
  Marker(
    markerId: MarkerId("1"),
    position: LatLng(37.7749, -122.4194),
    infoWindow: InfoWindow(title: "San Francisco"),
  ),
};

Step 4: Customizing Markers

Custom markers make your map visually appealing:

  1. Add an image asset: assets/images/marker.png
  2. Update pubspec.yaml:
flutter:
  assets:
    - assets/images/marker.png
  1. Use the custom icon:
BitmapDescriptor customIcon;

@override
void initState() {
  super.initState();
  BitmapDescriptor.fromAssetImage(
          ImageConfiguration(size: Size(48, 48)), 'assets/images/marker.png')
      .then((d) {
    customIcon = d;
  });
}

Assign icon: customIcon in your Marker.

Tip: Use vector images (SVGs) for scalable custom markers.

Step 5: Handling Marker Taps

Marker(
  markerId: MarkerId("1"),
  position: LatLng(37.7749, -122.4194),
  infoWindow: InfoWindow(title: "San Francisco"),
  onTap: () {
    print("Marker tapped!");
  },
);

Best practice: Show additional info or trigger navigation when a marker is tapped.

Step 6: Bonus – Polylines and Circles

Add routes and zones to enhance your maps:

Polyline(
  polylineId: PolylineId("route1"),
  points: [LatLng(37.7749, -122.4194), LatLng(37.7849, -122.4094)],
  color: Colors.blue,
  width: 5,
);

Circle(
  circleId: CircleId("circle1"),
  center: LatLng(37.7749, -122.4194),
  radius: 500,
  fillColor: Colors.blue.withOpacity(0.3),
  strokeColor: Colors.blue,
  strokeWidth: 2,
);

Tip: Combine polylines and circles to highlight routes and service areas.

Frequently Asked Questions (FAQ)

Q1: Can I use Google Maps offline in Flutter?
A: No, Google Maps requires an internet connection. You can cache map tiles using third-party packages, but offline support is limited.

Q2: Can I display multiple markers dynamically?
A: Yes! Use a Set<Marker> and update it with new coordinates from an API or Firebase.

Q3: Are there alternatives to Google Maps in Flutter?
A: Yes, Mapbox, OpenStreetMap, and HERE Maps can be used depending on your needs.

Conclusion

Flutter Google Maps Integration enables developers to create rich, interactive, and location-based applications efficiently. With custom markers, polylines, circles, and interactive features, your app can provide a superior user experience.

Next Steps:

  • Implement real-time location tracking with geolocator
  • Use marker clustering for multiple locations
  • Combine with Firebase to store and retrieve location data

Ready to Take Your Flutter App to the Next Level?

Integrating Google Maps in Flutter opens up endless possibilities for location-based features. Whether you want to build a delivery app, travel guide, or any interactive map-based application, the steps in this guide will set you on the right path.

If you have questions, need help with custom map features, or want a consultation for your Flutter project, feel free to contact us.

Also, explore more in-depth guides and tutorials on our CodeBlogByAzm Blog to enhance your Flutter and backend skills.

You Might Like!