simple_google_map 0.0.2
simple_google_map: ^0.0.2 copied to clipboard
A simple wrapper for google_maps_flutter that handles permissions, markers, dark mode, and zoom fitting effortlessly.
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
SimpleLocationobjects and the package converts them into aSet<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
onCameraViewChangeso 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: