Skip to content
Blog

Google Maps in Flutter: google_maps_flutter Integration

Add interactive Google Maps to your Flutter app with google_maps_flutter — GoogleMap, camera control, markers, and API key setup.

Published on • November 4, 2026

AI Assistant

google_maps_flutter (v2.19.0 on pub.dev) embeds the native Google Maps SDKs on Android and iOS via platform views, exposing the same map features: markers, polylines, camera moves, and gesture handling.

API key setup

The map needs a Google Cloud API key with the Maps SDK enabled:

  • Android: add <meta-data android:name="com.google.android.geo.API_KEY" ...> to android/app/src/main/AndroidManifest.xml.
  • iOS: set GMSServices.provideAPIKey(...) in AppDelegate.

Restrict the key by bundle ID/package name and API to keep it safe.

Rendering a map

import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapPage extends StatefulWidget {
  const MapPage({super.key});
  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final _controller = Completer<GoogleMapController>();

  static const _initial = CameraPosition(
    target: LatLng(13.7563, 100.5018),
    zoom: 12,
  );

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      initialCameraPosition: _initial,
      onMapCreated: _controller.complete,
      myLocationEnabled: true,
      zoomControlsEnabled: false,
    );
  }
}

Moving the camera

Once the Completer<GoogleMapController> resolves, animate to positions:

final controller = await _controller.future;
await controller.animateCamera(
  CameraUpdate.newCameraPosition(
    const CameraPosition(target: LatLng(37.7749, -122.4194), zoom: 14),
  ),
);

Markers

final marker = Marker(
  markerId: const MarkerId('hq'),
  position: const LatLng(13.7563, 100.5018),
  infoWindow: const InfoWindow(title: 'RedlineSoft HQ'),
  onTap: () {},
);

GoogleMap(
  initialCameraPosition: _initial,
  markers: {marker},
)

For custom icons, load a BitmapDescriptor from an asset or base64. The package also supports advanced markers with HTML/Flutter-rendered content on platforms that allow it.

Takeaway: google_maps_flutter embeds native Google Maps behind a GoogleMap widget — set up the API key per platform, capture the controller from onMapCreated, animate with CameraUpdate, and manage markers as a Set<Marker>.