Abdul Manan
 · Developer

Custom Map For Location Picker

Custom map for location picker then will picker lat long on user tap and show marker
Also covert lat long into address using geocoding package.

// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:google_maps_flutter/google_maps_flutter.dart' as GoogleMaps;
import 'package:geocoding/geocoding.dart';

class CustomMapForLocationPicker extends StatefulWidget {
  const CustomMapForLocationPicker({
    super.key,
    this.width,
    this.height,
    required this.onTapMap,
  });

  final double? width;
  final double? height;
  final Future<dynamic> Function(String address, double lat, double long)
      onTapMap;

  @override
  State<CustomMapForLocationPicker> createState() =>
      _CustomMapForLocationPickerState();
}

class _CustomMapForLocationPickerState
    extends State<CustomMapForLocationPicker> {
  GoogleMaps.GoogleMapController? _controller;
  late GoogleMaps.LatLng _selectedLatLng;
  GoogleMaps.LatLng currentLatLng =
      GoogleMaps.LatLng(FFAppState().currentLat, FFAppState().currentLng);
  String _selectedAddress = '';
  Set<GoogleMaps.Marker> _markers = Set();

  @override
  void initState() {
    super.initState();
    getCurrentPosition().then((value) {
      if (mounted) {
        setState(() {
          currentLatLng = GoogleMaps.LatLng(
              FFAppState().currentLat, FFAppState().currentLng);
          _controller?.animateCamera(GoogleMaps.CameraUpdate.newCameraPosition(
              GoogleMaps.CameraPosition(
            target: currentLatLng,
            zoom: 12,
          )));
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: GoogleMaps.GoogleMap(
            initialCameraPosition: GoogleMaps.CameraPosition(
              target: currentLatLng,
              zoom: 12,
            ),
            onMapCreated: (GoogleMaps.GoogleMapController controller) {
              _controller = controller;
            },
            onTap: _addMarker,
            mapType: GoogleMaps.MapType.normal,
            markers: _markers,
            myLocationButtonEnabled: false,
          ),
        ),
      ],
    );
  }

  void _addMarker(GoogleMaps.LatLng latLng) async {
    setState(() {
      _selectedLatLng = latLng;
      _markers.clear();
      _markers.add(
        GoogleMaps.Marker(
          markerId: GoogleMaps.MarkerId('TappedLocation'),
          position: latLng,
          infoWindow: GoogleMaps.InfoWindow(
            title: '$_selectedAddress',
            snippet: '${latLng.latitude}, ${latLng.longitude}',
          ),
        ),
      );
      print("$_selectedAddress");
      widget.onTapMap(_selectedAddress, _selectedLatLng.latitude,
          _selectedLatLng.longitude);
    });

    List<Placemark> placemarks =
        await placemarkFromCoordinates(latLng.latitude, latLng.longitude);

    if (placemarks.isNotEmpty) {
      Placemark placemark = placemarks.first;
      setState(() {
        _selectedAddress =
            '${placemark.street}, ${placemark.locality}, ${placemark.administrativeArea}, ${placemark.country}';
      });
    }

    _controller?.animateCamera(GoogleMaps.CameraUpdate.newLatLng(latLng));
  }
}
6
13 replies