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" ...>toandroid/app/src/main/AndroidManifest.xml. - iOS: set
GMSServices.provideAPIKey(...)inAppDelegate.
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>.