This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with simple smooth animations, making a nice UI and UX.

Last update: Oct 22, 2022

Related tags

Overview

search_map_place

This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with simple smooth animations, providing a nice UI and UX. This will also provide great information about the user selected place, like the coordinates, the bounds to determine the zoom of the GoogleMap widget, and so on.

This is an example of what can be done using this package. To see the source code, check the examples folder.

Getting Started

To install, add it to your pubspec.yaml file:

dependencies:
    search_map_place: <latest>

After that, make sure you have the following APIs activated in your Google Cloud Platform:

Places
Geolocation
Geocoding

You can now import it to your file and use it on your app.

import 'package:search_map_place/search_map_place.dart';

How to use it

Where you want to add the search widget, call SearchMapPlaceWidget's constructor:

Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SearchMapPlaceWidget(
        apiKey: // YOUR GOOGLE MAPS API KEY
      )
    )
  );
}

The constructor has 7 attributes related to the API:

String apiKey is the only required attribute. It is the Google Maps API Key your application is using
(Place) void onSelected is a callback function called when the user selects one of the autocomplete options.
(Place) void onSearch is a callback function called when the user clicks on the search icon.
String language is the Language used for the autocompletion. Default is 'en' (english). Check the full list of supported languages for the Google Maps API
LatLng location is the point around which you wish to retrieve place information. If this value is provided, radius must be provided aswell.
int radius is the distance (in meters) within which to return place results. Note that setting a radius biases results to the indicated area, but may not fully restrict results to the specified area. If this value is provided, location must be provided aswell. See Location Biasing and Location Restrict in the Google Maps API documentation.
bool restrictBounds will return only those places that are strictly within the region defined by location and radius.
PlaceType placeType will allow you to filter Places by its type. For more information on available types, check supported types for Autocompletion. On default, no filters are passed to the request, which means all Place types will be shown on autocompletion.

The `Place` class

This class will be returned on the onSelected and onSearch methods. It allows us to get more information about the user selected place.

Initially, it provides you with only basic information:

description contains the human-readable name for the returned result. For establishment results, this is usually the business name.
placeIdA textual identifier that uniquely identifies a place. For more information about place IDs, see the Place IDs overview.
types contains an array of types that apply to this place. The array can contain multiple values. Learn more about Place types.
fullJSON has the full JSON response received from the Places API. Can be used to extract extra information. More info on the Places Autocomplete API documentation

However, you can get more information like the coordinates and the bounds of the place by calling

await myPlace.geolocation;

Example

Here's an example of the widget being used:

return SearchMapPlaceWidget(
    apiKey: YOUR_API_KEY,
    // The language of the autocompletion
    language: 'en',
    // The position used to give better recomendations. In this case we are using the user position
    location: userPosition.coordinates,
    radius: 30000,
    onSelected: (Place place) async {
        final geolocation = await place.geolocation;

        // Will animate the GoogleMap camera, taking us to the selected position with an appropriate zoom
        final GoogleMapController controller = await _mapController.future;
        controller.animateCamera(CameraUpdate.newLatLng(geolocation.coordinates));
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));
    },
);

Future Implementations

There are a lot of features that can be added to this package. Here are some features I want to implement (or could be implemented by someone else):

Make the widget more personalizable
Make this package independent of google_maps_flutter
Allow users to close the box clicking outside of it
Proper widget dimensions for phones in portrait orientation or foldables.

Comments

Issues with searching

The searchBox comes up on the screen, but places don't show up according to the search query. If you want, I can share screenshot of the problem. Hope it gets fixed soon.

opened by pratik037 27
Version issue

Because every version of search_map_place from git depends on google_maps_flutter ^0.5.13 and app depends on google_maps_flutter 1.0.0, search_map_place from git is forbidden.

opened by abhishek-butola 3

Exception: RangeError (index): Invalid value: Valid value range is empty: 0

Trying to integrate this awesome widget into my map. Problem occuring when calling getRouteBetweenCoordinates Not sure why I'm getting this error, only difference from example is that I'm getting dynamic location data from user. Any help would be appreciated!

Positioned(
                top: 30,
                left: MediaQuery.of(context).size.width * 0.05,
                child: SearchMapPlaceWidget(
                  icon: Icons.location_on,
                  iconColor: Colors.green,
                  clearIcon: Icons.cancel,
                  placeholder: 'Pick your Destination',
                  apiKey: apiKEY,
                  location: LatLng(-37.763356, 144.958447),
                  radius: 10000,
                  onSelected: (place) async {
                    final geolocation = await place.geolocation;
                    
                    
                    PolylinePoints polylineGetter = PolylinePoints();
                    List<PointLatLng> result =
                        await polylineGetter.getRouteBetweenCoordinates(
                      apiKEY,
                      _curloc.latitude,
                      _curloc.longitude,
                      geolocation.coordinates.latitude,
                      geolocation.coordinates.longitude,
                    );
                    print("results: $result"); 

                    List<LatLng> polylineCoordinates = [];

                    for (var point in result) {
                      polylineCoordinates
                          .add(LatLng(point.latitude, point.longitude));
                    }

                    // Adding marker to the selected location using a custom icon.
                    final destination = Marker(
                      markerId: MarkerId('user-destination'),
                      icon: goodBrewIcon,
                      position: geolocation.coordinates,
                    );

                    final GoogleMapController controller =
                        await _mapController.future;
                    setState(() {
                      _selectedPlace = place;
                      _polylinePoints = polylineCoordinates;
                      _markers.add(destination);
                    });
                  },
                ),
              ),

opened by hyperboras 2

Keyboard should minimize on select search place.
void _selectPlace(Place prediction) async { ..... FocusScope.of(context).unfocus(); // this code will remove the focus }

I think it would be a good idea and user experience to minimize the keyboard when the user selects a location. If we remove the focus from the TextField.
opened by pavel-birdy 2

The argument you passed for Place is not compatible

Hey there!

First of all, thank you for the awesome work! I'm using the lastest version of the plugin and the example provided, but I'm facing this issue:

I/flutter ( 8067): The argument you passed for Place is not compatible.
I/flutter ( 8067): Another exception was thrown: NoSuchMethodError: The method 'call' was called on null.

This is after I enter something, get a suggestion and click on the search icon. If I just click on the suggestion, the output is the following:

E/flutter ( 8067): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: RangeError (index): Invalid value: Valid value range is empty: 0
E/flutter ( 8067): #0      List.[] (dart:core-patch/growable_array.dart:145:60)
E/flutter ( 8067): #1      new Geolocation.fromJSON (package:search_map_place/src/geolocation.dart:7:51)
E/flutter ( 8067): #2      Geocoding.getGeolocation (package:search_map_place/src/geocoding.dart:14:24)
E/flutter ( 8067): <asynchronous suspension>
E/flutter ( 8067): #3      Place.geolocation (package:search_map_place/src/place.dart:59:42)
E/flutter ( 8067): <asynchronous suspension>
E/flutter ( 8067): #4      MapSampleState.build.<anonymous closure> (package:pro_organizer/main.dart:87:49)
E/flutter ( 8067): <asynchronous suspension>
E/flutter ( 8067): #5      _SearchMapPlaceWidgetState._selectPlace (package:search_map_place/src/searchMapPlaceWidget.dart:238:12)
E/flutter ( 8067): <asynchronous suspension>
E/flutter ( 8067): #6      _SearchMapPlaceWidgetState._placeOption.<anonymous closure> (package:search_map_place/src/searchMapPlaceWidget.dart:156:24)
E/flutter ( 8067): #7      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:635:14)
E/flutter ( 8067): #8      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:711:32)
E/flutter ( 8067): #9      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:181:24)
E/flutter ( 8067): #10     TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:352:11)
E/flutter ( 8067): #11     TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:264:7)
E/flutter ( 8067): #12     PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:450:9)
E/flutter ( 8067): #13     PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:73:12)
E/flutter ( 8067): #14     PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:100:11)
E/flutter ( 8067): #15     _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:218:19)
E/flutter ( 8067): #16     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:198:22)
E/flutter ( 8067): #17     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:156:7)
E/flutter ( 8067): #18     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:102:7)
E/flutter ( 8067): #19     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:86:7)
E/flutter ( 8067): #20     _rootRunUnary (dart:async/zone.dart:1136:13)
E/flutter ( 8067): #21     _CustomZone.runUnary (dart:async/zone.dart:1029:19)
E/flutter ( 8067): #22     _CustomZone.runUnaryGuarded (dart:async/zone.dart:931:7)
E/flutter ( 8067): #23     _invoke1 (dart:ui/hooks.dart:234:10)
E/flutter ( 8067): #24     _dispatchPointerDataPacket (dart:ui/hooks.dart:154:5)
E/flutter ( 8067):

Any help will be appreciated!

opened by BKirev 2

Additional features
Added:

Being able to specify corner radius

Leading widget

Useful for drawers and navigation

Trailing widget

Useful for settings, progression, save, etc.
opened by iwishiwasaneagle 1
Lack for error messages

Hi,

I have notice that this plugin does not provide proper error msgs to identify the errors like this in your google Api calls, so i had to put debug msg to find the actual error msg. I hope you would look into this.

{ "error_message" : "You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started", "results" : [], "status" : "REQUEST_DENIED" }

Thanks Chora

opened by chorauoc 1

Issues with getting geolocation

I try exactly the same sample code below

return SearchMapPlaceWidget(
    apiKey: YOUR_API_KEY,
    // The language of the autocompletion
    language: 'en',
    // The position used to give better recomendations. In this case we are using the user position
    location: userPosition.coordinates,
    radius: 30000,
    onSelected: (Place place) async {
        print(place.description);
        final geolocation = await place.geolocation;

        // Will animate the GoogleMap camera, taking us to the selected position with an appropriate zoom
        final GoogleMapController controller = await _mapController.future;
        controller.animateCamera(CameraUpdate.newLatLng(geolocation.coordinates));
        controller.animateCamera(CameraUpdate.newLatLngBounds(geolocation.bounds, 0));
    },
);

. However, when I ran it, I got an error at the line

'final geolocation = await place.geolocation;'

says

Exception has occurred.
RangeError (RangeError (index): Invalid value: Valid value range is empty: 0)

Can anyone help? :'<

opened by ntvthuyen 1

New Customization
Define an optional leading icon in the search bar

Define an optional size (default to 24) for icons (leading icon, search icon, clear icon)

Define an optional font size for all text in the widget

Define hasShadow, which if false will remove the shadow from the widget

Define onClear, which is an optional function that will be invoked upon the user clicking the clear button, if they have it enabled
opened by aamirki 0
Allow to customize the placeholder text

This simple modification allows the user of the widget to specify the text they'd like to see as a placeholder in the search bar. If no placeholder text has been specified, the behaviour does not change.

opened by savy-91 0

search_map_place 0.3.0 depends on google_maps_flutter ^0.5.13

i get this error after update google_maps_flutter package to 2.0.1 version.

Because search_map_place 0.3.0 depends on google_maps_flutter ^0.5.13 and no versions of search_map_place match >0.3.0 <0.4.0, search_map_place ^0.3.0 requires google_maps_flutter ^0.5.13.
So, because xxxxxxx depends on both google_maps_flutter ^2.0.1 and search_map_place ^0.3.0, version solving failed.

pub get failed (1; So, because xxxxxxx depends on both google_maps_flutter ^2.0.1 and search_map_place ^0.3.0, version solving failed.)

opened by mshamsi502 0

Not compatible with latest google_maps_flutter

Because every version of search_map_place depends on google_maps_flutter ^0.5.13 and X depends on google_maps_flutter >=1.0.6, search_map_place is forbidden. So, because X depends on search_map_place any, version solving failed. pub get failed (1; So, because X depends on search_map_place any, version solving failed.)

opened by Velek 2