Flutter — Highlight any area in Google Maps

We have already shown you how to add Google Maps and custom markers to a Flutter app. Let’s take it one step further and show you how to add a circle to your map or identify a specific area City, State, or Country.

Highlight an area on Google Map

Note that: It is already assumed that you know how to add Google Maps to the Flutter app. If not please check my previous article 👉Flutter — Google Map with Custom Marker.

Video tutorial

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.

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(23.762912, 90.427816);
@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,
                ),
              },
              // ToDo: Add Circle
              // ToDo: Add polygon
            ),
          ),
        ],
      ),
    );
  }
}

Preview: GoogleMapScreen

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 center sets the location for the circle. I’m using intialLocation so that the marker will be the middle point of the circle. The radius value of 430 is suitable, but if the map is not zoomed, then use a larger value. In order to avoid a huge border around the circle, I have set strokeWidth to 2.

Preview with Circle

Highlight a specific area

It’s not always necessary to draw a circle, perhaps you just need to mark a certain area. In order to accomplish this, we use Google Maps Polygons. Need to replace //ToDo: Add polygon with below code

polygons: {
  Polygon(
    polygonId: const PolygonId("1"),
    fillColor: const Color(0xFF006491).withOpacity(0.1),
    strokeWidth: 2,
    points: const [
      LatLng(23.766315, 90.425778),
      LatLng(23.764691, 90.424767),
      LatLng(23.761916, 90.426862),
      LatLng(23.758532, 90.428588),
      LatLng(23.758825, 90.429228),
      LatLng(23.763698, 90.431324),
    ],
  ),
},

Preview of highlight an area

Complete source code 🔥

Take a look at the complete code that has a custom marker. Also, display a warning message if the marker is outside of the selected area. Source code [Patreon]

Preview

If I got something wrong? Let me know in the comments. I would love to improve.

Bonus 🥳 Shop UI Kit

FlutterShop - Premium E-commerce UI kit for Flutter

Clap 👏 If this article helps you.