Simple Google Map

A smart, simplified wrapper around the official google_maps_flutter package that handles the boring boilerplate for you.

Features

  • Automatic Permissions: Automatically checks and requests GPS permissions before rendering the map.
  • Simple Markers: Pass a simple list of SimpleLocation objects and the package converts them into a Set<Marker> automatically.
  • Auto-Centering: Automatically centers the camera on the user's initial location or current GPS position with a beautiful default zoom.
  • Dark Mode Support: Comes with a gorgeous, built-in Dark Mode theme that explicitly ensures Points of Interest (POIs) remain visible (a common issue with standard dark map styles).
  • Lazy Loading Ready: Exposes onCameraViewChange so your host app can fetch new locations from your backend when the user pans or zooms the map!

Getting Started

First, add simple_google_map to your pubspec.yaml dependencies.

Second, you must add your Google Maps API Key to your native Android and iOS configurations.

  • Android: Add the API key to your android/app/src/main/AndroidManifest.xml.
  • iOS: Add the API key to your ios/Runner/AppDelegate.swift.

(For detailed instructions on adding the API key, refer to the official Google Maps Flutter documentation).

Usage

import 'package:simple_google_map/simple_google_map.dart';

// ...

SimpleGoogleMap(
  initialLocation: SimpleLocation(id: 'start', latitude: 37.7749, longitude: -122.4194),
  locations: [
    SimpleLocation(id: '1', latitude: 37.7849, longitude: -122.4094),
    SimpleLocation(id: '2', latitude: 37.7649, longitude: -122.4294),
  ],
  temporaryLocation: SimpleLocation(id: 'temp', latitude: 37.7700, longitude: -122.4100),
  temporaryMarkerIcon: myCustomIcon, // Optional: customize the temporary marker icon
  onMapTap: (lat, lng) {
    print("User tapped map at $lat, $lng");
  },
  onTemporaryMarkerTap: (location) {
    print("User tapped the temporary marker!");
  },
  onMarkerTap: (location) {
    print("Tapped location: ${location.id}");
  },
  onCameraViewChange: (centerLat, centerLng, zoom) {
    // Fetch new markers from your backend using these bounds!
  },
)

Advanced Controllers

You can hide the default map controls and use the SimpleMapController to build your own custom UI:

final _controller = SimpleMapController();

// Inside build:
SimpleGoogleMap(
  controller: _controller,
  showDefaultControls: false,
  locations: myLocations,
);

// Somewhere else in your UI:
ElevatedButton(
  onPressed: () => _controller.zoomIn(),
  child: const Icon(Icons.add),
);

Credits & Dependencies

This package is proudly built on top of the official Google Maps package and excellent community packages:

Libraries

simple_google_map