Flutter Google Map Integration in iOS and Android

Welcome to our Flutter tutorial! In this guide, we will walk you through the process of integrating Google Maps into your Flutter app, displaying the user's current location with a marker, and enabling the Google Maps SDK for both Android and iOS using the Google Cloud Console.

Steps to Integrate Google Maps in Flutter

1. Setting Up Dependencies

To get started, add the necessary dependencies in your pubspec.yaml file:

  dependencies:
    google_maps_flutter: latest_version
    geolocator: latest_version
    permission_handler: latest_version

After adding these dependencies, run the following command to install them:

flutter pub get

2. Enabling Google Maps SDK

You need to enable the Google Maps SDK for both Android and iOS from the Google Cloud Console. Follow these steps:

• Visit Google Cloud Console.
• Create a new project or select an existing one.
• Navigate to APIs & Services > Library.
• Enable Google Maps SDK for Android and Google Maps SDK for iOS.
• Generate an API key and add it to your Flutter project.

3. Requesting Location Permissions

To access the user's location, request permissions using the permission_handler package. Add the required permissions in your Android AndroidManifest.xml and iOS Info.plist files:

Android (AndroidManifest.xml):

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

iOS (Info.plist):

<key>NSLocationWhenInUseUsageDescription</key>
<string>We need your location to show your position on the map.</string>

Use the following code snippet to request permissions:

Permission.location.request().then((status) {
  if (status.isGranted) {
    print("Location permission granted");
  }
});

4. Fetching Current Location

Use the geolocator package to get the user's current location:

Position position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high);

After fetching the location, update the map to center on the user's position.

5. Displaying Google Maps

To display Google Maps in your Flutter app, use the GoogleMap widget:

GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(37.7749, -122.4194), // Default location
    zoom: 14,
  ),
  myLocationEnabled: true,
  onMapCreated: (GoogleMapController controller) {
    mapController = controller;
  },
);

6. Adding a Marker

To add a marker at the user's current location:

Marker marker = Marker(
  markerId: MarkerId("currentLocation"),
  position: LatLng(position.latitude, position.longitude),
  infoWindow: InfoWindow(title: "You are here"),
);

7. UI Enhancements

You can enhance the user experience by adding a Floating Action Button (FAB) to manually refresh the current location:

FloatingActionButton(
  onPressed: () async {
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    mapController.animateCamera(CameraUpdate.newLatLng(
        LatLng(position.latitude, position.longitude)));
  },
  child: Icon(Icons.my_location),
);

Conclusion

By following these steps, you can successfully integrate Google Maps into your Flutter app and display the user's current location with a marker. This tutorial helps you set up dependencies, request permissions, fetch the current location, and enhance UI interactions.

For more details, visit Google Cloud Console.

Social Media Links

Join our Facebook community: Takneeki Code

Feel free to leave any questions or suggestions in the comments section below. Happy coding! 🚀