CODEWITHSUNDEEP
google-mapsflutter
mirkancal
mirkancal

Reputation: 5345

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

    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.

Upvotes: 48

Views: 117966

Answers (3)

Dharam Budh
Dharam Budh

Reputation: 2282

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;
  }
}

Upvotes: -2

yathavan
yathavan

Reputation: 2376

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(),
              ),

Upvotes: 6

Marcos Boaventura
Marcos Boaventura

Reputation: 4741

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.

Upvotes: 83

Related Questions