Google Maps in Flutter
Introduction to Location-based Services
Location-based services aaj kal ke apps ka ek important feature ban gaya hai. Isse users ko apni current location ke basis pe relevant information provide ki ja sakti hai. Jaise food delivery apps, ride-sharing apps, aur even fitness tracking apps.
Adding Google Maps Flutter plug-in as a Dependency
Google Maps ko apne Flutter app mein use karne ke liye, pehle humein google_maps_flutter plug-in ko apni project dependencies mein add karna padta hai. Yeh hum pubspec.yaml file mein add karenge:
dependencies:
flutter:
sdk: flutter
google_maps_flutter: latest_version
Iske baad, terminal mein flutter pub get command run karke dependencies fetch kar lein.
Configure the App with the API Key
Google Maps ko use karne ke liye, humein Google Cloud Platform se API key leni padti hai. Yeh steps follow karen:
1. Google Cloud Console pe jaake naya project create karein.
2. "API & Services" section mein jaake "Credentials" tab pe click karein aur nayi API key generate karein.
3. API key ko apni Flutter project mein add karein. Android ke liye, AndroidManifest.xml file mein aur iOS ke liye, AppDelegate.swift file mein API key add karein.
Android Example:
<application>
<!-- Other configurations -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY"/>
</application>
iOS Example:
GMSServices.provideAPIKey("YOUR_API_KEY")
Adding a Google Map to the App
Google Map ko Flutter app mein add karne ke liye, GoogleMap widget ka use karte hain:
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MapSample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps in Flutter'),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(37.7749, -122.4194),
zoom: 10,
),
),
);
}
}
Get Address of Current Location on Google Map Adding a Google Map Marker
Current location ka address get karne ke liye geocoding package use hota hai. Aur marker add karne ke liye GoogleMap widget ka markers parameter use karte hain:
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:geocoding/geocoding.dart';
class MapSample extends StatefulWidget {
@override
State<MapSample> createState() => MapSampleState();
}
class MapSampleState extends State<MapSample> {
late GoogleMapController mapController;
final LatLng _center = const LatLng(37.7749, -122.4194);
String _address = '';
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}
void _getAddressFromLatLng() async {
try {
List<Placemark> placemarks = await placemarkFromCoordinates(
center.latitude, center.longitude);
Placemark place = placemarks[0];
setState(() {
_address = '${place.locality}, ${place.country}';
});
} catch (e) {
print(e);
}
}
@override
void initState() {
super.initState();
_getAddressFromLatLng();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Google Maps in Flutter'),
),
body: GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 10,
),
markers: {
Marker(
markerId: MarkerId('currentLocation'),
position: _center,
),
},
),
floatingActionButton: FloatingActionButton(
onPressed: _getAddressFromLatLng,
tooltip: 'Get Address',
child: Icon(Icons.location_searching),
),
);
}
}
Google Map Types
Google Maps mein different types hote hain jaise normal, satellite, terrain, aur hybrid. mapType parameter use karke change kar sakte hain:
领英推荐
GoogleMap(
initialCameraPosition: CameraPosition(
target: _center,
zoom: 10,
),
mapType: MapType.satellite, // Change this to MapType.normal, MapType.terrain, or MapType.hybrid
)
Moving the Camera (Camera Animation)
Camera ko move karne ke liye GoogleMapController ka use karte hain:
void _animateToLocation() {
mapController.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(40.7128, -74.0060),
zoom: 12,
),
),
);
}
Google Map Constructor
GoogleMap widget ka constructor different parameters accept karta hai jaise initialCameraPosition, markers, mapType, etc. Yeh customize karne ke options provide karta hai.
Types of Location Access
Do tarah ki location access hoti hai:
1. Foreground Location Access: Jab app foreground mein ho tab location access karna.
2. Background Location Access: Jab app background mein ho tab location access karna.
Foreground Location Access
Foreground location access ke liye location package use karke current location fetch kar sakte hain:
import 'package:location/location.dart';
void _getCurrentLocation() async {
var location = new Location();
var currentLocation = await location.getLocation();
print(currentLocation.latitude);
print(currentLocation.longitude);
}
Background Location Access
Background location access ke liye special permissions chahiye hoti hain. Android aur iOS dono mein alag alag permissions configure karni hoti hain. Ensure karein ki app policies ko follow karein jab background location access use karte hain.
Request Location Permission
Location permission request karne ke liye permission_handler package use kar sakte hain:
import 'package:permission_handler/permission_handler.dart';
void _requestLocationPermission() async {
var status = await Permission.location.request();
if (status.isGranted) {
print("Location permission granted");
} else {
print("Location permission denied");
}
}
In simple steps se aap apne Flutter app mein Google Maps integrate kar sakte hain aur location-based services ka faayda utha sakte hain.