Nowadays Google Maps are the most important part of everyone's life. Every technology wants to add Google Maps in the application. In this flutter example we will learn how to add google maps to flutter application.
Flutter provided a plugin to load google maps.
Plugin google_maps_flutter
Integrate this plugin in the Flutter application.
Create Application:
First, create a Flutter application in Any IDE, I am using Android Studio.
By creating a new Flutter Application menu in the File options.
Add Plugin to application
First, we need to add google_maps_flutter dependency in the pubspec.yaml file under the dependency line. It should be like below. Replace the version with the latest available version.
dev_dependencies:
flutter_test:
sdk: flutter
google_maps_flutter: ^2.0.6
|
To use Google Maps we need to get a Google API key.
For this, we need to create an application in Google Console and get an API key.
Google Console
Create a new project
Login to Google Console and select application and go to API & Services and create credentials and copy the API key.
Enable Google Maps SDK API
Now come to the Flutter application and Paste your key in the Manifest file inside the meta tag.
|
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="PUT_YOUR_KEY"/>
|
Create Google maps widget
We are ready with Google Maps key, we need to load google maps, Load Google maps add below code
GoogleMap(
mapType: MapType.normal,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
)
|
GoogleMap widget wil load different types of Maps, we will load this by handle the mapType property
enum MapType {
/// Do not display map tiles.
none,
/// Normal tiles (traffic and labels, subtle terrain information).
normal,
/// Satellite imaging tiles (aerial photos)
satellite,
/// Terrain tiles (indicates type and height of terrain)
terrain,
/// Hybrid tiles (satellite images with some labels/overlays)
hybrid,
}
|
How to add Markers to Google Maps?
To add Marker to the Map we need to create Marker object and pass this marker object to Map by markers property
Let's create Marker object
To create marker object we need to create MarkerId to handle the markers
MarkerId markerId1=MarkerId("Current");
Marker marker1=Marker(
markerId: markerId1,
position: LatLng(17.385044, 78.486671),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
infoWindow: InfoWindow(
title: "Hytech City",onTap: (){
},snippet: "Snipet Hitech City"
));
|
We are ready with marker object, to add marker to map we need to pass this marker as collection type Set.
Let create Set object and pass this marker to set object
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
markers[markerId1]=marker1;
|
Now finally add marker to Map
GoogleMap(
mapType: MapType.normal,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
markers: Set<Marker>.of(markers.values),
)
|
Now run the flutter application. Now you can see Google Maps on your Screen
Complete code
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:location/location.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Google Maps Demo',
home: MapSample(),
);
}
}
class MapSample extends StatefulWidget {
@override
State<MapSample> createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(17.385044, 78.486671),
zoom: 18,
);
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
late MarkerId markerId1;
late Marker marker1;
@override
void initState() {
super.initState();
markerId1=MarkerId("Current");
marker1=Marker(
markerId: markerId1,
position: LatLng(17.385044, 78.486671),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
infoWindow: InfoWindow(
title: "Hytech City",onTap: (){
},snippet: "Snipet Hitech City"
));
markers[markerId1]=marker1;
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(backgroundColor: Colors.white,),
body: Padding(
padding: const EdgeInsets.only(top:8.0),
child: Stack(
children: [
GoogleMap(
mapType: MapType.normal,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
markers: Set<Marker>.of(markers.values),
),
],
),
),
);
}
}
|
Conclusion: With this post we have learned how to load Google maps in flutter and how to add Marker to Map.
More Flutter Google Maps Examples
Show Multiple Markers on Maps Flutter
How to fetch current location Address
How do i share current location address with flutter
