> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/llms.txt)

# Switch from Google Maps SDK for Flutter to Mapbox Maps SDK for Flutter

Are you using the **Google Maps SDK for Flutter** (the `google_maps_flutter` plugin) and want to switch to the **Mapbox Maps SDK for Flutter**? This tutorial walks through the core mapping concepts side by side, showing you the Google approach alongside the equivalent Mapbox implementation at each step.

In this tutorial, you will:

-   Add the Mapbox Maps SDK for Flutter to your app
-   Initialize a map
-   Add a marker to the map
-   Show marker details when a user taps it

This screenshot shows the final product you will build in this tutorial.

![Screenshot of a Flutter app on iOS showing the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-ios-2.62123fd.480.png)

iOS

![Screenshot of a Flutter app on Android showing the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-android-2.7b5f5e5.480.png)

Android

## Prerequisites

This guide assumes familiarity with Dart and Flutter development and that you already have an app built with the `google_maps_flutter` plugin.

To complete this tutorial, you will need:

-   **A Mapbox access token**: Find yours on the [Access token page](https://console.mapbox.com/account/access-tokens/) of your Mapbox account.
-   **The Flutter SDK**: Install the version of the [Flutter SDK](https://docs.flutter.dev/get-started/install) compatible with your operating system.
-   **A working Getting started app**: A Flutter app already configured with the Mapbox Maps SDK for Flutter and showing a globe, as described in the [Getting started with the Maps SDK for Flutter](https://docs.mapbox.com/flutter/maps/guides/install/) guide.

![Screenshot of a Flutter app on iOS showing a globe.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-ios-globe.cf51e4c.480.png)

iOS

![Screenshot of a Flutter app on Android showing a globe.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-android-globe.ee4df1f.480.png)

Android

## Initialize a map

Both SDKs render a map inside a widget that you add to your app's widget tree. The APIs look different, but the goal is the same: show a map centered on a location.

This tutorial assumes you have followed the [Getting started with the Maps SDK for Flutter](https://docs.mapbox.com/flutter/maps/guides/install/) guide. This guide will leave you with a new Flutter project showing a globe.

![Screenshot of a Flutter app on iOS showing a globe.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-ios-globe.cf51e4c.480.png)

iOS

![Screenshot of a Flutter app on Android showing a globe.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-android-globe.ee4df1f.480.png)

Android

### Google Maps SDK for Flutter

With Google Maps, you added a `GoogleMap` widget and set its initial camera position:

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MapPage());
  }
}

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

  static const CameraPosition _sanFrancisco = CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 12,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Google Maps Get Started")),
      body: GoogleMap(
        initialCameraPosition: _sanFrancisco,
      ),
    );
  }
}
```

### Mapbox Maps SDK for Flutter

With Mapbox, you set your access token in `main()` and add a `MapWidget` with a `CameraOptions` describing the initial view:

```dart
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Pass your access token to MapboxOptions so you can load a map
  String ACCESS_TOKEN = const String.fromEnvironment("ACCESS_TOKEN");
  MapboxOptions.setAccessToken(ACCESS_TOKEN);

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MapPage());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Mapbox Get Started")),
      body: MapWidget(
        cameraOptions: CameraOptions(
          center: Point(coordinates: Position(-122.4194, 37.7749)),
          zoom: 12,
          bearing: 0,
          pitch: 0,
        ),
      ),
    );
  }
}
```

Run the app with your access token to see a full-screen map centered on San Francisco:

```bash
flutter run --dart-define=ACCESS_TOKEN=YOUR_MAPBOX_ACCESS_TOKEN
```

![Screenshot of a Flutter app on iOS showing a map of San Francisco.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-ios-1.e13ad1b.480.png)

iOS

![Screenshot of a Flutter app on Android showing a map of San Francisco.](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-android-1.8430e67.480.png)

Android

Key differences:

-   **Map initialization**: Google uses a `GoogleMap` widget with an `initialCameraPosition`; Mapbox uses a `MapWidget` with a `cameraOptions` parameter.
-   **Coordinates**: Google uses `LatLng(lat, lng)`. Mapbox uses `Point(coordinates: Position(lng, lat))`, matching GeoJSON ordering.
-   **Access token**: Google configures its API key natively in `AndroidManifest.xml` and `AppDelegate.swift`/`Info.plist`. Mapbox also sets the access token once in Dart with `MapboxOptions.setAccessToken()`, on top of the native configuration from the [Getting started guide](https://docs.mapbox.com/flutter/maps/guides/install/).

## Add markers and callouts

Now you are ready to add multiple markers and show marker details when a user taps one.

### Google Maps SDK for Flutter

With Google Maps, you created a set of `Marker` objects for a list of San Francisco locations and showed an information window when a user tapped one.

```dart
//...
class Landmark {
  const Landmark(this.position, this.title, this.subtitle);

  final LatLng position;
  final String title;
  final String subtitle;
}

final List<Landmark> landmarks = [
  Landmark(
    LatLng(37.7955, -122.3937),
    "Ferry Building",
    "Marketplace and transit hub on the Embarcadero",
  ),
  Landmark(
    LatLng(37.8199, -122.4783),
    "Golden Gate Bridge",
    "Iconic suspension bridge spanning the Golden Gate strait",
  ),
  Landmark(
    LatLng(37.8267, -122.4230),
    "Alcatraz Island",
    "Former federal prison on an island in San Francisco Bay",
  ),
];

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

  static const CameraPosition _sanFrancisco = CameraPosition(
    target: LatLng(37.8020, -122.4230),
    zoom: 11,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Google Maps Get Started")),
      body: GoogleMap(
        initialCameraPosition: _sanFrancisco,
        markers: {
          for (final landmark in landmarks)
            Marker(
              markerId: MarkerId(landmark.title),
              position: landmark.position,
              infoWindow: InfoWindow(
                title: landmark.title,
                snippet: landmark.subtitle,
              ),
            ),
        },
      ),
    );
  }
}
//...
```

### Mapbox Maps SDK for Flutter

With Mapbox, use a `CircleAnnotationManager` to create an annotation for each San Francisco location, then keep a lookup from annotation ID to landmark so you can show its details when tapped.

```dart
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Pass your access token to MapboxOptions so you can load a map
  String ACCESS_TOKEN = const String.fromEnvironment("ACCESS_TOKEN");
  MapboxOptions.setAccessToken(ACCESS_TOKEN);

  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MapPage());
  }
}

class Landmark {
  const Landmark(this.point, this.title, this.subtitle, this.color);

  final Point point;
  final String title;
  final String subtitle;
  final Color color;
}

final List<Landmark> landmarks = [
  Landmark(
    Point(coordinates: Position(-122.3937, 37.7955)),
    "Ferry Building",
    "Marketplace and transit hub on the Embarcadero",
    Colors.red,
  ),
  Landmark(
    Point(coordinates: Position(-122.4783, 37.8199)),
    "Golden Gate Bridge",
    "Iconic suspension bridge spanning the Golden Gate strait",
    Colors.orange,
  ),
  Landmark(
    Point(coordinates: Position(-122.4230, 37.8267)),
    "Alcatraz Island",
    "Former federal prison on an island in San Francisco Bay",
    Colors.blue,
  ),
];

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

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  final Map<String, Landmark> _landmarksByAnnotationId = {};

  Future<void> _onMapCreated(MapboxMap mapboxMap) async {
    final manager = await mapboxMap.annotations.createCircleAnnotationManager();

    final created = await manager.createMulti([
      for (final landmark in landmarks)
        CircleAnnotationOptions(
          geometry: landmark.point,
          circleColor: landmark.color.toARGB32(),
          circleRadius: 10.0,
          circleStrokeColor: Colors.white.toARGB32(),
          circleStrokeWidth: 2.0,
        ),
    ]);

    for (var i = 0; i < created.length; i++) {
      final annotation = created[i];
      if (annotation != null) {
        _landmarksByAnnotationId[annotation.id] = landmarks[i];
      }
    }

    manager.tapEvents(onTap: (annotation) {
      final landmark = _landmarksByAnnotationId[annotation.id];
      if (landmark == null) return;
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text("${landmark.title}\n${landmark.subtitle}")),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Mapbox Get Started")),
      body: MapWidget(
        cameraOptions: CameraOptions(
          center: Point(coordinates: Position(-122.4230, 37.8020)),
          zoom: 11,
          bearing: 0,
          pitch: 0,
        ),
        onMapCreated: _onMapCreated,
      ),
    );
  }
}
```

This section shows how both SDKs add the same three San Francisco markers and respond to user interaction. In Google Maps, each `Marker`'s `infoWindow` provides built-in title and snippet content that appears when the marker is tapped. In Mapbox, you create annotations with a `CircleAnnotationManager`, then use `tapEvents` to look up the tapped landmark and display its details yourself — for example in a `SnackBar`.

Run the app to see the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco. Tap a marker to show its details.

![Screenshot of a Flutter app on iOS showing the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-ios-2.62123fd.480.png)

iOS

![Screenshot of a Flutter app on Android showing the Ferry Building, Golden Gate Bridge, and Alcatraz Island markers in San Francisco](https://docs.mapbox.com/help/assets/ideal-img/tutorials--flutter-google-migration-android-2.7b5f5e5.480.png)

Android

## Next steps

**Congratulations!** You have switched a Google Maps SDK for Flutter workflow to the Mapbox Maps SDK for Flutter.

### What we covered

-   Adding the Mapbox Maps SDK for Flutter dependency and access token
-   Initializing a map with `MapWidget` and `CameraOptions`
-   Adding a `CircleAnnotation` marker to the map
-   Showing marker details with a `SnackBar` on tap

Explore more Flutter mapping tutorials:

-   [Getting started with the Maps SDK for Flutter](https://docs.mapbox.com/help/tutorials/getting-started-flutter/)

> **Related content (guide): [Mapbox Maps SDK for Flutter](https://docs.mapbox.com/flutter/maps/guides/)**
> 
> Full guide documentation for the Mapbox Maps SDK for Flutter.

> **Related content (guide): [User location](https://docs.mapbox.com/flutter/maps/guides/user-location/)**
> 
> Show the user's current location on the map with a customizable location puck.

> **Related content (guide): [Markers and annotations](https://docs.mapbox.com/flutter/maps/guides/markers-and-annotations/)**
> 
> Add markers and annotations to display points of interest on your map.

> **Related content (guide): [User interaction](https://docs.mapbox.com/flutter/maps/guides/user-interaction/)**
> 
> Respond to taps, drags, and other gestures on the map.

> **Related content (guide): [Camera and animation](https://docs.mapbox.com/flutter/maps/guides/camera-and-animation/)**
> 
> Control the map camera and animate transitions between viewpoints.