Initial Setup
It’s time to get started! Here’s a simple screen with a google map widget that sets the initialCameraPosition and a marker.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class GoogleMapScreen extends StatefulWidget {
const GoogleMapScreen({Key? key}) : super(key: key);
@override
State<GoogleMapScreen> createState() => _GoogleMapScreenState();
}
class _GoogleMapScreenState extends State<GoogleMapScreen> {
final Completer<GoogleMapController> _controller = Completer();
LatLng intialLocation = const LatLng(22.3039, 70.8022);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: GoogleMap(
initialCameraPosition: CameraPosition(
target: intialLocation,
zoom: 15.6746,
),
onMapCreated: (controller) {
_controller.complete(controller);
},
markers: {
Marker(
markerId: const MarkerId("1"),
position: intialLocation,
),
},
),
),
],
),
);
}
}
Add a Circle
The first question is how to add a circle to our map. Replace ToDo: Add Circle with below code ????
circles: {
Circle(
circleId: CircleId("1"),
center: intialLocation,
radius: 420,
strokeWidth: 2,
fillColor: Color(0xFF006491).withOpacity(0.2),
),
},The circle’s placement is determined by the centre. To position the marker at the centre of the circle, I’m using initialLocation. Use a bigger value if the map is not zoomed in; otherwise, the radius value of 430 is appropriate. I adjusted strokeWidth to 2 to prevent a large border from encircling the circle.
Highlight a specific area
Sometimes all you need to do is indicate a certain place; drawing a circle is not always essential. We use Google Maps Polygons to make this happen. Replace is necessary //ToDo: Use the code below to add a polygon.
Polygon(
polygonId: const PolygonId("1"),
fillColor: const Color(0xFF006491).withOpacity(0.1),
strokeWidth: 2,
points: const [
LatLng(22.3039, 70.8000),
LatLng(22.3029, 70.8022),
LatLng(22.3069, 70.8032),
LatLng(22.3069, 70.8032),
LatLng(22.3049, 70.8022),
],
),
