Flutter: How to add marker to Google Maps with new Marker API?

Question

    mapController.addMarker(
  MarkerOptions(
    position: LatLng(37.4219999, -122.0862462),
  ),
);

I've seen this code snippet in a blog post, and I'm trying to add markers to Google Maps.

The method 'addMarker' isn't defined for the class 'GoogleMapController'.

I think the library has changed and I want to know what's the new way doing this, I've looked up in the controller.dart and api reference but couldn't figure it out.

I would be happy to see some tutorials and blog posts about it, don't hesitate to share.

Marcos Boaventura · Accepted Answer · 2020-03-03T15:24:35.340

Yes, The google maps API has changed and the Marker API is widget based and not based in controller anymore.

By CHANGELOG.md

"Breaking change. Changed the Marker API to be widget based, it was controller based. Also changed the example app to account for the same."

I copy some pieces of code from github app example that I think is important to you

Map<MarkerId, Marker> markers = <MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS

void _add() {
    var markerIdVal = MyWayToGenerateId();
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(
        center.latitude + sin(_markerIdCounter * pi / 6.0) / 20.0,
        center.longitude + cos(_markerIdCounter * pi / 6.0) / 20.0,
      ),
      infoWindow: InfoWindow(title: markerIdVal, snippet: '*'),
      onTap: () {
        _onMarkerTapped(markerId);
      },
    );

    setState(() {
      // adding a new marker to map
      markers[markerId] = marker;
    });
}

GoogleMap(
              onMapCreated: _onMapCreated,
              initialCameraPosition: const CameraPosition(
                target: LatLng(-33.852, 151.211),
                zoom: 11.0,
              ),
              // TODO(iskakaushik): Remove this when collection literals makes it to stable.
              // https://github.com/flutter/flutter/issues/28312
              // ignore: prefer_collection_literals
              markers: Set<Marker>.of(markers.values), // YOUR MARKS IN MAP
)

I advise you take a look in example app here. There is updated to new API.

These links have been moved to https://github.com/flutter/plugins/blob/master/packages/google_maps_flutter/google_maps_flutter/example/lib/place_marker.dart — Mr. Arbitrary, Mar 03 '20 at 15:22
Where do you call _add()? What if I want to frill my markers list in initState? — JOSEPH Blessingh, Mar 24 '20 at 16:12

score 4 · Answer 2 · answered Dec 07 '21 at 06:39

I did below example from google codelabs.

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
LatLng _center =  LatLng(9.669111, 80.014007);

onMap created add single static marker

void _onMapCreated(GoogleMapController controller) {
    mapController = controller;

    final marker = Marker(
      markerId: MarkerId('place_name'),
      position: LatLng(9.669111, 80.014007),
      // icon: BitmapDescriptor.,
      infoWindow: InfoWindow(
        title: 'title',
        snippet: 'address',
      ),
    );

    setState(() {
      markers[MarkerId('place_name')] = marker;
    });
  }

google map widget:

GoogleMap(
                onMapCreated: _onMapCreated,
                initialCameraPosition: CameraPosition(
                  target: _center,
                  zoom: 14.0,
                ),
                markers: markers.values.toSet(),
              ),

Dharam Budh · Answer 3 · 2023-08-28T07:16:24.207

Here's your solution.

So, this is the output of the below-mentioned source code: View

Source code:

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

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

class _MapScreenState extends State<MapScreen> {
  bool visibility = false;

  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  static const CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(visibility ? Icons.visibility_off : Icons.visibility),
        onPressed: () {
          visibility = !visibility;
          _add();
          setState(() {});
        },
      ),
      body: SafeArea(
        child: GoogleMap(
          initialCameraPosition: _kGooglePlex,
          markers: markers.values.toSet(),
        ),
      ),
    );
  }

  void _add() {
    const marker1 = Marker(
      markerId: MarkerId('place_name1'),
      position: LatLng(37.42796133580664, -122.085749655962),
    );
    const marker2 = Marker(
      markerId: MarkerId('place_name2'),
      position: LatLng(37.422131, -122.084801),
    );
    if (visibility) {
      markers[const MarkerId('place_name1')] = marker1;
      markers[const MarkerId('place_name2')] = marker2;
    } else {
      var blankMarker = const Marker(markerId: MarkerId(""));
      markers[const MarkerId('place_name1')] = blankMarker;
      markers[const MarkerId('place_name2')] = blankMarker;
    }
    return;
  }
}

How it is different than the accepted answer? Do you mind explaining the code instead of sending video? — mirkancal, Aug 26 '23 at 09:04
In _add() function, you can see the condition. So, when there's visibility on that time, we're assigning the actual values to the markers and in the else part, we're de-assigning the actual values, or I can say we're re-assigning it with fake values. — Dharam Budh, Aug 26 '23 at 12:24
Thank you for the explanation. It sounds like you are toggling markers by replacing with blank ones but I think it's not related to the question or solve anything. This question is solved when users point me out changelog and new way to add markers, 4 years ago. — mirkancal, Aug 27 '23 at 09:35

Flutter: How to add marker to Google Maps with new Marker API?

3 Answers3

Linked