A Flutter application to demonstrate how to implement Google maps
google_maps_flutter_example
A new Flutter application to demonstrate how to implement flutter google maps in a flutter application and perfoem advanced tasks on it.
Adding Map To the App
-
Get an API key at https://cloud.google.com/maps-platform/.
-
Enable Google Map SDK for each platform.
- Go to Google Developers Console.
- Choose the project that you want to enable Google Maps on.
- Select the navigation menu and then select "Google Maps".
- Select "APIs" under the Google Maps menu.
- To enable Google Maps for Android, select "Maps SDK for Android" in the "Additional APIs" section, then select "ENABLE".
- To enable Google Maps for iOS, select "Maps SDK for iOS" in the "Additional APIs" section, then select "ENABLE".
- Make sure the APIs you enabled are under the "Enabled APIs" section.
-
In
android/app/src/main/AndroidManifest.xml
insideApplication tag
add your key
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
- In
ios/Runner/AppDelegate.swift
add the following lines
import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GMSServices.provideAPIKey("YOUR KEY HERE")
GeneratedPluginRegistrant.register(with: self)
return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
}
- Use the
GoogleMapsWidget.dart
inside thelib/widget
folder as normal widget and use it where you want.
Adding Custom Marker To the map
Adding normal marker
- Declare a Set of Markers that will be shown on the map
Set<Marker> _markers = Set<Marker>();
- Add the set of markers to GoogleMap widget
GoogleMap(
markers: _markers,
- Update the set of markers after the map is created in onMapCreated
GoogleMap(
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
_setMapPins([LatLng(30.029585, 31.022356)]);
}
- Using this function the map will be updated with the given markers on it
_setMapPins(List<LatLng> markersLocation) {
_markers.clear();
setState(() {
markersLocation.forEach((markerLocation) {
_markers.add(Marker(
markerId: MarkerId(markerLocation.toString()),
position: markerLocation,
));
});
});
}
Customizing the markers
- Declare a BitmapDescriptor which will hold the customIcon
late BitmapDescriptor customIcon;
- Inside initState() Assign the needed png to the customIcon
@override
void initState() {
BitmapDescriptor.fromAssetImage(ImageConfiguration(size: Size(50, 50)),
'assets/images/marker_car.png')
.then((icon) {
customIcon = icon;
});
super.initState();
}
- Finally add the customIcon to the marker
Marker(
markerId: MarkerId(markerLocation.toString()),
position: markerLocation,
icon: customIcon,
)
Map Customization (Light/Dark mode)
Prepare the map styles
- Go to https://mapstyle.withgoogle.com/
- Choose the old version of the site by choosing No thanks, take me to the old style wizard
- You will find a lot of options, play with it until you get the desired style.
- Click Finish and a pop-up will show with the json code of your style, copy it and add it as a json file in your assets folder
Don't forgot to mention it in your pubspec.yaml
You can find two styles in the project's assets folder
Adding styles to the map
- Declare Strings that will hold your style's json and a bool to control which mode is shown on the map
bool mapDarkMode = true;
late String _darkMapStyle;
late String _lightMapStyle;
- In initState declare the styles
Future _loadMapStyles() async {
_darkMapStyle = await rootBundle.loadString('assets/map_style/dark.json');
_lightMapStyle = await rootBundle.loadString('assets/map_style/light.json');
}
- After creating the map, set the style
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
_setMapPins([LatLng(30.029585, 31.022356)]);
_setMapStyle();
},
Future _setMapStyle() async {
final controller = await _controller.future;
if (mapDarkMode)
controller.setMapStyle(_darkMapStyle);
else
controller.setMapStyle(_lightMapStyle);
}
- To change the style we created a button on the map using the stack widget
Positioned(
top: 100,
right: 30,
child: Container(
height: 30,
width: 30,
child: IconButton(
icon: Icon(
mapDarkMode ? Icons.brightness_4 : Icons.brightness_5,
color: Theme.of(context).primaryColor,
),
onPressed: () {
setState(() {
mapDarkMode = !mapDarkMode;
_setMapStyle();
});
},
),
)),
Drawing routes
Activating Directions API
- Go to Google Developers Console.
- Choose the project that you want to enable Google Maps on.
- Select the navigation menu and then select "Google Maps".
- Select "APIs" under the Google Maps menu.
- Enable Google Directions, select "Directions API" in the "Additional APIs" section, then select "ENABLE".
- Make sure the APIs you enabled are under the "Enabled APIs" section.
Adding route to the map
- Declare your start and end points
final LatLng initialLatLng = LatLng(30.029585, 31.022356);
final LatLng destinationLatLng = LatLng(30.060567, 30.962413);
- Declare polyline and polylineCoordinates
Set<Polyline> _polyline = {};
List<LatLng> polylineCoordinates = [];
- After creating the map, set the polyline
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
_setMapPins([LatLng(30.029585, 31.022356)]);
_setMapStyle();
_addPolyLines();
},
_addPolyLines() {
setState(() {
lat = (initialLatLng.latitude + destinationLatLng.latitude)/2;
lng= (initialLatLng.longitude + destinationLatLng.longitude)/2;
_moveCamera(13.0);
_setPolyLines();
});
}
- To set polyline we send a get request to https://www.maps.googleapis.com/maps/api/directions/json with the start location, end location and the api key
final result = await MapRepository()
.getRouteCoordinates(initialLatLng, destinationLatLng);
final route = result.data["routes"][0]["overview_polyline"]["points"];
- Then we translate the results to a polyline using the MapUtils
_polyline.add(Polyline(
polylineId: PolylineId("tripRoute"),
//pass any string here
width: 3,
geodesic: true,
points: MapUtils.convertToLatLng(MapUtils.decodePoly(route)),
color: Theme.of(context).primaryColor));
GitHub
https://github.com/heshamerfan97/flutter_google_maps_example