Flutter - nearby places with google_maps_webservice and google_maps_flutter

Question

The aim of this is to turn places that a user can see around them using the stock google_maps_flutter plugin into clickable markers. On clicking a marker the user should be able to see the name, opening times, reviews, images etc.

I'm just stuck with retrieving this kind of data, and displaying it on the google_maps_flutter map. I would also like to learn how to input a radius in miles, so if the user only wanted places within a mile they could choose this as they wish.

What I'm asking for would be an explanation on how to get nearby place data within a variable distance, and how to put these places on the map in a dynamic fashion.

Looking at fig. 1 below for context, I could expect that in clicking on 'Big Ben', I would get name, opening times, reviews, images etc.

This would be done using placeId, an example of getting an image would be something like: https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${photoReference}&key=${kGoogleApiKey}.

Figure 1.

Edit:

After playing with Sreerams conclusions I'm getting this returned instead of each nearby place:

Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult', Instance of 'PlacesSearchResult'

This is what I'm using to retrieve this data:

  static String kGoogleApiKey = 'myKey';
  GoogleMapsPlaces _places = GoogleMapsPlaces(apiKey: kGoogleApiKey);

  List<PlacesSearchResult> places = [];

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    getNearbyPlaces(LatLng(lat,lng));
  }

  void getNearbyPlaces(LatLng center) async {
    final location = Location(lat, lng);
    final result = await _places.searchNearbyWithRadius(location, 2500);

    setState(() {
      if (result.status == "OK") {
        this.places = result.results;

      }
      print(result.status);
    });
  }

This what I'm using to display this data:

Text(places[i].toString())

I assume the solution will rework some of the code from the answer to this question.

Thanks

Solution

Add a Card inside ListView, each row shows the place name, address, and type. The inline MapView on the top displays all the pin marker of the places. When user taps on the row, the app will navigate to the place detail screen passing the placeId.

Future<Null> showDetailPlace(String placeId) async {
    if (placeId != null) {
        Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => PlaceDetailWidget(placeId)),
        );
    }
}

class PlaceDetailWidget extends StatefulWidget {
    String placeId;
    PlaceDetailWidget(String placeId) {
        this.placeId = placeId;
}

Find a detailed explanation on this by rajesh muthyala