Google Map Autocomplete Place Search Box in Flutter

The Google Maps Autocomplete Place Search Box, often simply called the "search bar" in Google Maps, is a powerful tool that helps you quickly and easily find the places you're looking for. It acts as a dynamic search engine within the map itself, offering suggestions as you type.

In this tutorial, we will learn 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

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

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.

Full Flutter App Example:

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(){
  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_KAY";
  GoogleMapController? mapController; //contrller for Google map
  CameraPosition? cameraPosition;
  LatLng startLocation = LatLng(27.6602292, 85.308027); 
  String location = "Search Location"; 

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Place Search Autocomplete 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; 
                    });
                  },
             ),

           

             //search autoconplete input
             Positioned(  //search input bar
               top:10,
               child: InkWell(
                 onTap: () async {
                  var place = await PlacesAutocomplete.show(
                          context: context,
                          apiKey: googleApikey,
                          mode: Mode.overlay,
                          types: [],
                          strictbounds: false,
                          components: [Component(Component.country, 'np')],
                                      //google_map_webservice package
                          onError: (err){
                             print(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 = geometry.location.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)));
                   }
                 },
                 child:Padding(
                   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(Icons.search),
                            dense: true,
                         )
                       ),
                    ),
                 )
               )
             )


            ]
          )
       );
  }
}

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

#flutter