How to Make Google Map Autocomplete Place Search Box in Flutter App

In this example, we are going to show you how to make Google Maps autocomplete place search suggestions in the Flutter app. After selecting the suggestion from search box, we will move the camera position to the selected location on Google map.

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

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

  1. flutter_google_places_hoc081098
  2. google_maps_webservice
  3. google_api_headers
  4. google_maps_flutter
    sdk: flutter
  flutter_google_places_hoc081098: ^1.0.0-nullsafety.5
  google_api_headers: ^1.1.1
  google_maps_webservice: ^0.0.20-nullsafety.5
  google_maps_flutter: ^2.1.1

We had used flutter_google_places package, but it was not working due to version compatibility, so we used the above package instead.

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

Activate these APIs on Google Map Console:

Now see the example below where we have implemented a completely autocomplete search suggestion box on Google Map to search places in Flutter App.

import 'package:flutter/material.dart';
import 'package:flutter_google_places_hoc081098/flutter_google_places_hoc081098.dart';
import 'package:google_api_headers/google_api_headers.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_webservice/places.dart';

void main(){

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

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

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

  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Place Search Autocomplete Google Map"),
             backgroundColor: Colors.deepPurpleAccent,
          body: Stack(

              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; 


             //search autoconplete input
             Positioned(  //search input bar
               child: InkWell(
                 onTap: () async {
                  var place = await
                          context: context,
                          apiKey: googleApikey,
                          mode: Mode.overlay,
                          types: [],
                          strictbounds: false,
                          components: [Component(, 'np')],
                                      //google_map_webservice package
                          onError: (err){

                   if(place != null){
                        setState(() {
                          location = place.description.toString();

                       //form google_maps_webservice package
                       final plist = GoogleMapsPlaces(apiKey:googleApikey,
                              apiHeaders: await GoogleApiHeaders().getHeaders(),
                                        //from google_api_headers package
                        String placeid = place.placeId ?? "0";
                        final detail = await plist.getDetailsByPlaceId(placeid);
                        final geometry = detail.result.geometry!;
                        final lat =;
                        final lang = geometry.location.lng;
                        var newlatlang = LatLng(lat, lang);

                        //move map camera to selected place with animation
                        mapController?.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: newlatlang, zoom: 17)));
                   padding: EdgeInsets.all(15),
                    child: Card(
                       child: Container(
                         padding: EdgeInsets.all(0),
                         width: MediaQuery.of(context).size.width - 40,
                         child: ListTile(
                            title:Text(location, style: TextStyle(fontSize: 18),),
                            trailing: Icon(,
                            dense: true,


In this example, we have made autocomplete search box, where the user can input the query about the place, and the search box will show the suggestions according to the query on the search box, and when the user selects the suggestion, we move the map to the position where the location is located on Google map.

In this way, you can add place search autocomplete on Google map in the Flutter app.

No any Comments on this Article

Please Wait...