Google Maps Markers from Firebase LatLng don't appear on map

Issue

I am trying to add some markers from firebase on google maps and can’t figure out why the marks don’t appear on google maps (on the UI). Can someone help me or suggest me an updated tutorial?

void main() => runApp(Parkings());

class Parkings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '...',
      home: MapSample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  final FirebaseFirestore _database = FirebaseFirestore.instance;
  Completer<GoogleMapController> _controller = Completer();
  Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

  void _changeMap(LatLng position) async {
    final GoogleMapController controller = await _controller.future;

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(position.latitude, position.longitude),
        zoom: 20.0,
      ),
    ));
  }

  @override
  void initState() {
    addParkings();
    super.initState();
  }

This is how I try to get the data and create markers:

  addParkings() {
    _database
        .collection('places')
        .where('name', isEqualTo: "School")
        .where('name', isEqualTo: "Theatre")
        // ignore: deprecated_member_use
        .getDocuments()
        .then((docs) {
      // ignore: deprecated_member_use
      if (docs.documents.isNotEmpty) {
        // ignore: deprecated_member_use
        for (int i = 0; i < docs.documents.length; i++) {
          // ignore: deprecated_member_use
          initMarker(docs.documents[i].data, docs.documents[i].documentID);
        }
      }
    });
  }

  void initMarker(parking, parkingid) {
    var markerIdVal = parkingid;
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(parking['Latitud'], parking['Longitud']),
      infoWindow: InfoWindow(title: parking['name']),
    );

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

  static final CameraPosition _kGooglePlex = CameraPosition(
    target: LatLng(45.7936, 24.1213),
    zoom: 12.4746,
  );

Here I add the markers on the map:

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Parking Wizard'),
        backgroundColor: Colors.deepPurpleAccent,
      ),
      body: GoogleMap(
          mapType: MapType.hybrid,
          initialCameraPosition: _kGooglePlex,
          onMapCreated: (GoogleMapController controller) {
            _controller.complete(controller);
          },
          myLocationEnabled: true,
          markers: Set<Marker>.of(markers.values)),
      floatingActionButton: FloatingActionButton(
        onPressed: _currentLocation,
      ),
    );
  }

I use this function to get the current location of the device:

void _currentLocation() async {
    final GoogleMapController controller = await _controller.future;
    LocationData currentLocation;
    var location = new Location();
    try {
      currentLocation = await location.getLocation();
    } on Exception {
      currentLocation = null;
    }

    controller.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        bearing: 0,
        target: LatLng(currentLocation.latitude, currentLocation.longitude),
        zoom: 18.0,
      ),
    ));
  }
}

Solution

If anyone needs a flutter application that shows markers (from firebase) on map here is an example: 

map.dart:

    class StoreMap extends StatelessWidget {
      StoreMap({
        Key key,
        @required this.documents,
        @required this.initialPosition,
      }) : super(key: key);
    
      
      final List<DocumentSnapshot> documents;
      final LatLng initialPosition;
      final Completer<GoogleMapController> _controller = Completer();
    
    
      static final CameraPosition _initialPosition = CameraPosition(
        target: LatLng(45.791789, 24.150390),
        zoom: 14,
      );
    
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: GoogleMap(
            mapType: MapType.hybrid,
            initialCameraPosition: _initialPosition,
            onMapCreated: (GoogleMapController controller) {
              _controller.complete(controller);
            },
            myLocationEnabled: true,
            markers: documents
                .map((document) => Marker(
                      markerId: MarkerId(document.get('name')),
                      position: LatLng(
                        document.get('location').latitude,
                        document.get('location').longitude,
                      ),
                      infoWindow: InfoWindow(
                          title: document.get('name'),
                 ),
                    )
                .toSet(),
          ),
      floatingActionButton: FloatingActionButton(
            onPressed: _currentLocation,
            child: Icon(Icons.location_searching),
          ),
        );
      }
    
       void _currentLocation() async {
        final GoogleMapController controller = await _controller.future;
        LocationData currentLocation;
        var location = new Location();
        try {
          currentLocation = await location.getLocation();
        } on Exception {
          currentLocation = null;
        }
    
        controller.animateCamera(CameraUpdate.newCameraPosition(
          CameraPosition(
            bearing: 0,
            target: LatLng(currentLocation.latitude, currentLocation.longitude),
            zoom: 18.0,
          ),
        ));
      }
    
   

home.dart:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Stream<QuerySnapshot> _parkingsDb;
  List<Marker> allMarkers = [];

  @override
  void initState() {
    super.initState();
    // ignore: deprecated_member_use
    _parkingsDb = Firestore.instance.collection('places').snapshots();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text('....'), 
          backgroundColor: Colors.Blue,
        ),
        body: StreamBuilder<QuerySnapshot>(
          stream: _parkingsDb,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Center(child: Text('Error: ${snapshot.error}'));
            }
            if (!snapshot.hasData) {
              return Center(child: const Text('Loading...'));
            }

            // ignore: deprecated_member_use
            return StoreMap(
                // ignore: deprecated_member_use
                documents: snapshot.data.documents,
                initialPosition: const LatLng(45.791789, 24.150390));
          },
        ));
  }
}

class StoreList extends StatelessWidget {
  const StoreList({
    Key key,
    @required this.documents,
  }) : super(key: key);
  final List<DocumentSnapshot> documents;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: documents.length,
        itemBuilder: (builder, index) {
          final document = documents[index];
          return ListTile(
            title: Text(document.get('name')),
            subtitle: Text(document.get('location').toString()),
          );
        });
  }
}

P.S Keep in mind that I am beginner and I don’t know if there are major mistakes here 🙂

Answered By – Andreea Purta

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)