How to retrieve geo points for google map marker in flutter

user_16638338 0
Viewed 140

I am trying to achieve a custom marker with text right now. Something like this. something like this

and I am following this tutorial.

As far as the progress goes, the markers are not appearing on the Map yet. Could you please check my code and tell me where I go wrong? Thank you.

class TestMapView extends StatefulWidget {
  final NayyaaPropertyModel? propertyModel;
  const TestMapView({Key? key, this.propertyModel}) : super(key: key);

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

class _TestMapViewState extends State<TestMapView> {
  GoogleMapController? mapController;
  List<NayyaaPropertyModel> nayyaaProperty = [];
  List<Marker> customMarkers = [];

  @override
  void initState() {
    MarkerGenerator(markerWidgets(), (bitmaps) {
      setState(() {
        mapBitmapsToMarkers(bitmaps);
      });
    }).generate(context);
  }

  List<MapMarker> markerWidgets() {
    return nayyaaProperty.map((l) => MapMarker(l)).toList();
  }

  List<Marker>? mapBitmapsToMarkers(List<Uint8List> bitmaps) {
    bitmaps.asMap().forEach((i, bmp) async {
      final value = await FirebaseFirestore.instance
          .collection('properties')
          .doc('GeoHash')
          .get();
      final data = value.data();
      final _latPoint = data!['geopoint'];
      final _lngPoint = data['geopoint'];
      var _marker = Marker(
        markerId: MarkerId("$i"),
        position: LatLng(_latPoint.latitude, _lngPoint.longitude),
        icon: BitmapDescriptor.fromBytes(bmp),
      );
      setState(() {
        customMarkers.add(_marker);
      });
    });
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GoogleMap(
            markers: customMarkers.toSet(),
            onMapCreated: _onMapCreated,
            initialCameraPosition: const CameraPosition(
                target: LatLng(16.871311, 96.199379), zoom: 10)));
  }
}
flutter google-maps
1 Answers

Use stack and display your custom info window like this.

@override
  Widget build(BuildContext context) {
     return Stack(
         children: [
              GoogleMap(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context).size.height * 0.05),
                 onMapCreated: _onMapCreated,
                 myLocationEnabled: false,
                 zoomControlsEnabled: false,
                 zoomGesturesEnabled: true,
                 buildingsEnabled: true,
                 myLocationButtonEnabled: false,
                 onCameraMove: _onCameraMoved,
                 initialCameraPosition:
                     CameraPosition(target: _center, zoom: 15.0),
                 markers: markers,
                 onTap: (pos) {
                   _customInfoWindowController.hideInfoWindow!();
                 },
               ),
               CustomInfoWindow(
                 controller: _customInfoWindowController,
                 height: 180,
                 width: 250,
                 offset: 40,
                ),
             ],
           )
    
   }

This code is from one of my projects. So you can study this.

Initialize the markes in init state :

@override
   void initState() {
     super.initState();
      markers = Set.from([]);
      init();
       }

Code for creating marker is :

 Future<void> createMarker(
  BuildContext context, List<Restaurant> restaurants) async {
final Uint8List myLocation = await getBytesFromAsset(icon_my_location, 50);
customIcon = BitmapDescriptor.fromBytes(myLocation);

getBytesFromAsset(icon_map_marker, 100).then((markerIcon) {
  setState(() {
    mapIcon = BitmapDescriptor.fromBytes(markerIcon);
  });

  Set<Marker> data =
      getMarkers(restaurants, BitmapDescriptor.fromBytes(markerIcon));

  if (markers
      .where((element) => element.markerId == MarkerId("Home"))
      .isEmpty) {
    currentLocation.onLocationChanged.listen((LocationData loc) {
      setState(() {
        data.add(Marker(
            onTap: () {},
            infoWindow: InfoWindow(title: 'You are here!'),
            markerId: MarkerId('Home'),
            icon: customIcon,
            position: LatLng(loc.latitude ?? 0.0, loc.longitude ?? 0.0)));
      });
    });
  }

  setState(() {
    markers = data;
  });
});
 }

Here is onmapcreated function :

 void _onMapCreated(GoogleMapController controller) {
mapController = controller;
mapController.setMapStyle(jsonEncode(mapStyle));
_customInfoWindowController.googleMapController = controller;
fetchRestaurants();
 }

For more you can try this article on creating custom info window with example : Click Here

user_180265860
Related