Nowadays Google Maps is the most important part of everyone's life.
Every technology wants to add GoogleMaps in the 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: ^0.5.21+11
|
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
GoTo Conolse and select application and go to API & Services and create credentials and copy the API key.
Enable GoogleMaps SDK API
Now come to the Flutter application and Paste your key in the Manifest file inside the meta tag.
Create Googlemaps widget
Now create a Widget and add below code
|
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MyMaps extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return MyMapsState();
}
}
class MyMapsState extends State{
Completer _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(17.385044, 78.486671),
zoom: 14.4746,
);
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(leading: Icon(Icons.map),backgroundColor: Colors.grey,),
body: Container(
child: GoogleMap(initialCameraPosition: _kGooglePlex,
onTap: (_){
},
mapType: MapType.normal,
onMapCreated: (GoogleMapController controler){
_controller.complete(controler);
});
},
),
)
);
}
}
|
Now run the flutter application. Now you can see Google Maps on your Screen
Show Multiple Markers on Maps Flutter
