skip to Main Content

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


  1. First you need to make sure PlacesAPI is enabled in google cloud:

    • Go to the Google Cloud Console.
    • Select your project.
    • Navigate to the APIs & Services > Library.
    • Search for and enable the Places API.

    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:

    1. Go to the Google Cloud Console.
    2. Navigate to APIs & Services > Credentials.
    3. Click on your API key.
    4. Under Application restrictions, select Android apps.
    5. Add your app’s package name and SHA-1 certificate fingerprint. To
      get the SHA-1 fingerprint:

    For Debug Builds:
    Run the following command in your terminal to get the debug SHA-1
    fingerprint:

    keytool -list -v -keystore ~/.android/debug.keystore -alias
    androiddebugkey -storepass android -keypass android

    For Release Builds:
    Obtain the SHA-1 fingerprint from the keystore used for signing your
    release APK:

    keytool -list -v -keystore <path_to_your_keystore> -alias <your_alias>

    1. Add both SHA-1 fingerprints to the Android apps section.
    2. Under API restrictions, select Restrict key and choose the APIs your
      key will access (e.g., Google Maps JavaScript API, Places API).
    Login or Signup to reply.
  2. To display Points of Interest (POI), add the following to your style:

    GoogleMap(
        style: '''[{
            "featureType": "poi",
            "elementType": "labels.icon",
            "stylers": [{"visibility": "on"}]
        }]''',
    )
    

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search