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

Question

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

score 1 · Answer 1 · answered Sep 01 '20 at 19:16

1

The latitude and longitude are saved as Strings in Firestore instead of doubles.

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

A better to accomplish what you're trying to do would be to use the GeoPoint class from the Firestore package.

answered Sep 01 '20 at 19:16

ByteMe

1,575
1
12
23

I tried it doen't work. :( I have no ideea how to use GeoPoint class in flutter. – Andreea Purta Sep 01 '20 at 19:31
I added a picture with the debug console – Andreea Purta Sep 01 '20 at 19:44
hmm, it seems your user doesn't have permission to access the data in firestore. How's your firestore rules looking? – ByteMe Sep 01 '20 at 19:48
I am new to flutter and firebase.I added a picture of the rules. – Andreea Purta Sep 01 '20 at 20:01
with your firestore rules, you should be fine until september 22. Did you ensure that you set up firestore right? especially the part where you download the json file from firebase – ByteMe Sep 01 '20 at 22:48
Yes It is... If u have time can u please take a look at the project? https://github.com/andreeapurta/pwTry.git . Thank you so much! – Andreea Purta Sep 02 '20 at 21:55
congrats! Just curious though, what was causing the problem? – ByteMe Sep 03 '20 at 00:46
Also, please mark this answer as the right answer to help others with same question – ByteMe Sep 03 '20 at 00:47
1

I found another approach. I will post it here in case others need it. – Andreea Purta Sep 03 '20 at 00:49

score 1 · Accepted Answer · answered Sep 03 '20 at 01:00

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 :)

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

2 Answers2