Google Map with Places Autocomplete in Flutter, Part 2

Introduction

In this tutorial, we will enhance a Flutter application by integrating Google Maps with Places Autocomplete functionality. This guide is a continuation of a series aimed at building an app that can center a map based on user location or search results, find the nearest entities by category, and automatically scale the map to fit markers. By the end of this tutorial, you will be able to implement Places Autocomplete in your Flutter project, improving user experience when searching for locations.

Step 1: Set Up Your Flutter Project

• Create a new Flutter project or open an existing one.
• Ensure you have the necessary dependencies in your pubspec.yaml file:

  dependencies:
    flutter:
      sdk: flutter
    google_maps_flutter: ^latest_version
    provider: ^latest_version
    geolocator: ^latest_version
    google_places_flutter: ^latest_version
  

• Run flutter pub get to install the dependencies.

Step 2: Configure Google Cloud Platform

• Go to the Google Cloud Console and create a new project.
• Enable the Google Maps and Places APIs for your project.
• Create an API key:
  • Navigate to the "Credentials" section.
  • Click on "Create credentials" and select "API key".
  • Restrict the API key to your application by adding the package name and SHA-1 fingerprint.
• Add your API key to your Flutter project by including it in the Android and iOS configurations.

Step 3: Implement Places Autocomplete

• In your Flutter project, create a new widget for the Places Autocomplete feature.
• Use the Google Places Autocomplete package to set up the autocomplete functionality:

  import 'package:google_places_flutter/google_places_flutter.dart';
  
  class PlacesSearch extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return PlacesAutocompleteField(
        onChanged: (value) {
          // Handle the autocomplete selection
        },
      );
    }
  }
  

• Ensure you handle user input and trigger the autocomplete suggestions.

Step 4: Move Map to Selected Location

• After a user selects a location from the autocomplete suggestions, update the map to center on the selected place.
• Use the GoogleMapController to animate the movement:

  void moveToPlace(double lat, double lng) {
    final CameraUpdate update = CameraUpdate.newLatLng(LatLng(lat, lng));
    mapController.animateCamera(update);
  }
  

• Call this function with the latitude and longitude of the selected place.

Step 5: Display Markers on the Map

• Add markers to your map to represent selected locations and nearby services.
• Use the Marker class to create markers:

  Set<Marker> markers = {};
  
  void addMarker(double lat, double lng, String title) {
    markers.add(Marker(
      markerId: MarkerId(title),
      position: LatLng(lat, lng),
      infoWindow: InfoWindow(title: title),
    ));
  }
  

• Call addMarker whenever a new location is selected.

Conclusion

In this tutorial, you've learned how to integrate Places Autocomplete into your Flutter application using Google Maps. You set up the project, configured the Google Cloud Platform, implemented the autocomplete functionality, and moved the map to display selected locations.

Next Steps

• Explore additional features, such as filtering results based on categories or user preferences.
• Consider integrating user location tracking to enhance the app's usability.
• Check the complete project on GitHub for further reference: GitHub Repository.