I’m using google_maps_flutter: ^2.7.0
to display a marker based on the user’s location which works well, but I’m not seeing any POIs around the user. I know that they should be displayed. I am moving the Flutter app from a progressive web app to an Android & iOS apps and on the web I was seeing all POIs and was able to click on them. I would like this functionality if possible. To click on a POI and show a bottom modal with some data.
The Google Maps Android API Key is added to AndroidManifest
<application android:label="nftgame" android:name="${applicationName}" android:icon="@mipmap/ic_launcher">
<meta-data android:name="com.google.android.geo.API_KEY" android:value="[apiKeyValue]"/>
The API key doesn’t have any restrictions since we’re only testing for now.
Testin on a real device.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class GoogleMapWidget extends StatefulWidget {
final double lat;
final double lng;
final String name;
final String id;
final dynamic height;
final bool allRound;
const GoogleMapWidget({
super.key,
required this.lat,
required this.lng,
required this.name,
required this.id,
required this.height,
required this.allRound,
});
@override
State<GoogleMapWidget> createState() => _GoogleMapWidgetState();
}
class _GoogleMapWidgetState extends State<GoogleMapWidget> {
final Completer<GoogleMapController> mapController = Completer();
@override
void dispose() {
mapController.future.then((controller) {
controller.dispose();
});
super.dispose();
}
@override
Widget build(BuildContext context) {
List<Marker> markers = <Marker>[
Marker(
markerId: MarkerId(widget.id),
position: LatLng(widget.lat, widget.lng),
infoWindow: InfoWindow(title: widget.name),
)
];
return Container(
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: widget.allRound
? BorderRadius.circular(10.0)
: const BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0)),
color: Colors.grey[200],
),
child: SizedBox(
height: widget.height,
width: MediaQuery.of(context).size.width,
child: GoogleMap(
onTap: (LatLng position) {
print(position);
},
initialCameraPosition: CameraPosition(
target: LatLng(widget.lat, widget.lng),
zoom: 17.0,
),
mapType: MapType.normal,
markers: Set<Marker>.of(markers),
onMapCreated: (GoogleMapController controller) {
mapController.complete(controller);
},
),
),
);
}
}
2
Answers
First you need to make sure PlacesAPI is enabled in google cloud:
Note you might need to enable Billing account to access PlacesAPI even if it already enabled in your console.
Second, Configure API Key Restrictions
API key restrictions are crucial for securing your key and ensuring it works in both debug and release modes. You’ll need to configure restrictions based on the platform you’re developing for.
Restrict by Application Package Name and SHA-1 Certificate Fingerprint:
get the SHA-1 fingerprint:
For Debug Builds:
Run the following command in your terminal to get the debug SHA-1
fingerprint:
For Release Builds:
Obtain the SHA-1 fingerprint from the keystore used for signing your
release APK:
key will access (e.g., Google Maps JavaScript API, Places API).
To display Points of Interest (POI), add the following to your style:
Regarding the issue with handling POI clicks, it has been reported here. If you scroll down a bit, you will find some repositories that have implemented this functionality. You can use one of those until the issue is resolved.