How to Make Place Picker on Google Map in Flutter
Introduction
In this article, we will discuss how to create a place picker on a Google Map in Flutter, a popular mobile app development framework. A place picker is a feature that allows users to select a location on a map, making it a useful tool for applications that require geolocation-based functionality, such as ride-sharing services, food delivery, or location-based games. We will go through the steps required to implement a place picker on a Google Map in Flutter, using the Google Maps Flutter plugin.
Setup
Before we start implementing the place picker, we need to set up our Flutter project and add the necessary dependencies. First, add the following dependencies to your `pubspec.yaml` file:
“`yml
dependencies:
flutter:
sdk: flutter
googlemapsflutter: ^3.0.0
googleapis: ^12.0.0
googleplacepicker: ^2.0.0
“`
Next, import the necessary libraries in your Dart file:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:googlemapsflutter/googlemapsflutter’;
import ‘package:googleapis/maps/places/v3.dart’;
import ‘package:place_picker/coord.dart’;
“`
Create a Google Maps View
First, we need to create a Google Maps view in our Flutter app. We can use the `GoogleMap` widget provided by the Google Maps Flutter plugin. Create a new widget in your Dart file:
“`dart
class GoogleMapsView extends StatefulWidget {
GoogleMapsViewState createState() => GoogleMapsViewState();
}
class _GoogleMapsViewState extends State
final _scaffoldKey = new GlobalKey
final GoogleMapController _mapController = GoogleMapController();
@override
void initState() {
super.initState();
_initCameraPosition();
}
_initCameraPosition() async {
final mapDirection = googleMapsDirection();
final center = await mapDirection centers();
await _mapController.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(center.latitude, center.longitude),
zoom: 15,
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: GoogleMap(
onMapCreated: (GoogleMapController controller) {
setState(() {
_mapController = controller;
});
},
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 15,
),
onCameraMove: (position) {
setState(() {});
},
),
);
}
}
“`
Implement a Place Picker
Next, we need to implement the place picker. We can use the `place_picker` library provided by dart packages. Add the package to your `pubspec.yaml`:
“`yml
dependencies:
…
place_picker: ^2.0.0
“`
Then, import the library in your Dart file:
“`dart
import ‘package:place_picker/coord.dart’;
“`
Create a new function to handle the place picker:
“`dart
Future
final place = await showPlacePicker(
coord: Coord(
latitude: 37.7749,
longitude: -122.4194,
),
appBarTitle: “Select a location”,
initialCentre: LatLng(37.7749, -122.4194),
placeAutocompleteMode: PlaceAutocompleteMode.PACKAGE,
);
if (place != null) {
print(“Selected place: ${place.completeTitle}”);
} else {
print(“Place picker cancelled”);
}
}
“`
Finally, add a button to the Google Maps view to call the `place_picker`:
“`dart
FloatingActionButton(
onPressed: _showPlacePicker,
child: Text(“Select a location”),
),
“`
Integrating with Google Maps
To integrate the place picker with the Google Map, we need to add a marker at the selected location. First, add a `Marker` widget to the Google Map:
“`dart
Marker(
markerId: MarkerId(“selected_place”),
icon: BitmapDescriptor.defaultMarker,
position: LatLng(widget.selectedPlace.latitude, widget.selectedPlace.longitude),
)
“`
Then, update the `selectedPlace` variable when a location is selected:
“`dart
Future
final place = await showPlacePicker(
coord: Coord(
latitude: 37.7749,
longitude: -122.4194,
),
appBarTitle: “Select a location”,
initialCentre: LatLng(37.7749, -122.4194),
placeAutocompleteMode: PlaceAutocompleteMode.PACKAGE,
);
if (place != null) {
setState(() {
selectedPlace = place;
});
} else {
print(“Place picker cancelled”);
}
}
“`
Code Example
Here’s the complete code:
“`dart
import ‘package:flutter/material.dart’;
import ‘package:googlemapsflutter/googlemapsflutter.dart’;
import ‘package:googleapis/maps/places/v3.dart’;
import ‘package:place_picker/coord.dart’;
class GoogleMapsView extends StatefulWidget {
GoogleMapsViewState createState() => GoogleMapsViewState();
}
class _GoogleMapsViewState extends State
final _scaffoldKey = new GlobalKey
final GoogleMapController _mapController = GoogleMapController();
LatLng _selectedPlace;
_initCameraPosition() async {
final mapDirection = googleMapsDirection();
final center = await mapDirection centers();
await _mapController.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(center.latitude, center.longitude),
zoom: 15,
),
),
);
}
Future
final place = await showPlacePicker(
coord: Coord(
latitude: 37.7749,
longitude: -122.4194,
),
appBarTitle: “Select a location”,
initialCentre: LatLng(37.7749, -122.4194),
placeAutocompleteMode: PlaceAutocompleteMode.PACKAGE,
);
if (place != null) {
setState(() {
_selectedPlace = place;
});
} else {
print(“Place picker cancelled”);
}
}
@override
void initState() {
super.initState();
_initCameraPosition();
}
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text(“Google Maps View”),
),
body: Stack(
children: [
GoogleMap(
onMapCreated: (GoogleMapController controller) {
setState(() {
_mapController = controller;
});
},
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 15,
),
markers: {
Marker(
markerId: MarkerId(“selected_place”),
icon: BitmapDescriptor.defaultMarker,
position: _selectedPlace ?? LatLng(37.7749, -122.4194),
),
},
onCameraMove: (position) {},
),
FloatingActionButtons(
onPressed: _showPlacePicker,
child: Text(“Select a location”),
),
],
),
);
}
}
“`
Conclusion
In this article, we have covered how to create a place picker on a Google Map in Flutter using the Google Maps Flutter plugin and the `place_picker` library. We have also shown how to integrate the place picker with the Google Map by adding a marker at the selected location. With this tutorial, you now have a working place picker on a Google Map, and you can easily customize it to fit your app’s requirements.
Frequently Asked Questions (FAQs)
Q: How to implement a place picker without the `place_picker` library?
A: You can use the Google Places API to create a place picker. The API provides a set of endpoints that allow you to search for places and display them on a map. You will need to use the API client library for Flutter to interact with the API.
Q: How to display the selected location on the map?
A: You can use the `Marker` widget to display the selected location on the map. You will need to create a `Marker` widget and add it to the `markers` property of the `GoogleMap` widget.
Q: How to handle errors when using the Google Places API?
A: You can use try-catch blocks to handle errors when using the Google Places API. For example, you can use a try-catch block to catch the `IOException` exception that is thrown when the API returns an error response.
Q: How to customize the appearance of the place picker?
A: You can customize the appearance of the place picker by using stylesheets. The `place_picker` library provides a set of stylesheets that you can use to customize the look and feel of the place picker.
Q: How to support multiple languages in the place picker?
A: You can support multiple languages in the place picker by using a language translation library. The `place_picker` library provides a set of language translation libraries that you can use to support multiple languages.
