How to Make Drag and Drop Google Map Place Picker in Flutter

In this example, we are going to show you how to make a drag and drop marker place picker from Google Maps in Flutter App. We have implemented the custom marker where you can drop the Google map, and fetch the longitude and latitude when stops, and fetch the place details from latitude and longitude.

Before starting this tutorial, you have to integrate google Maps correctly on your project:

How to Add Google Map in Flutter App

Now, add these packages to your project by adding the following lines in pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  geocoding: ^2.0.1
  google_maps_flutter: ^2.1.1

Now, index the asset folder where you have put the coordinate picker image like below on pubspce.yaml file:

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - assets/images/

Activate these APIs on Google Map Console:

Now, see the example below where we have implemented the custom marker helper to pick longitude and latitude from Google map, and fetch the place information from Google Map API when coordinate is picked.

You can also see the complete place picker code example with both autocomplete search box and drag and drop marker picker on Google map:

How to Make Place Picker on Google Map in Flutter

import 'package:flutter/material.dart';
import 'package:geocoding/geocoding.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
   String googleApikey = "GOOGLE_MAP_API_KEY";
  GoogleMapController? mapController; //contrller for Google map
  CameraPosition? cameraPosition;
  LatLng startLocation = LatLng(27.6602292, 85.308027); 
  String location = "Location Name:"; 

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Longitude Latitude Picker in Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          ),
          body: Stack(
            children:[

              GoogleMap( //Map widget from google_maps_flutter package
                  zoomGesturesEnabled: true, //enable Zoom in, out on map
                  initialCameraPosition: CameraPosition( //innital position in map
                    target: startLocation, //initial position
                    zoom: 14.0, //initial zoom level
                  ),
                  mapType: MapType.normal, //map type
                  onMapCreated: (controller) { //method called when map is created
                    setState(() {
                      mapController = controller; 
                    });
                  },
                  onCameraMove: (CameraPosition cameraPositiona) {
                      cameraPosition = cameraPositiona; //when map is dragging 
                  },
                  onCameraIdle: () async { //when map drag stops
                     List<Placemark> placemarks = await placemarkFromCoordinates(cameraPosition!.target.latitude, cameraPosition!.target.longitude);
                     setState(() { //get place name from lat and lang
                        location = placemarks.first.administrativeArea.toString() + ", " +  placemarks.first.street.toString();
                     });
                  },
             ),

             Center( //picker image on google map
                child: Image.asset("assets/images/picker.png", width: 80,),
             ),

            
             Positioned(  //widget to display location name
               bottom:100,
               child: Padding(
                   padding: EdgeInsets.all(15),
                    child: Card(
                       child: Container(
                         padding: EdgeInsets.all(0),
                         width: MediaQuery.of(context).size.width - 40,
                         child: ListTile(
                            leading: Image.asset("assets/images/picker.png", width: 25,),
                            title:Text(location, style: TextStyle(fontSize: 18),),
                            dense: true,
                         )
                       ),
                    ),
                 )
               )
            ]
          )
       );
  }
}

In this example, we have implemented the coordinate picker marker from the assets folder, and the user can pick the place from Google Map by dragging and dropping the google map.