[Flutter] Drawing Circles and Rectangles on Google Maps

Overview

I will try displaying areas on a map using circles and rectangles with google_maps_flutter.

Required Package Installation

Add the following to pubspec.yaml, or install with flutter pub add google_maps_flutter.

dependencies:
  google_maps_flutter: ^2.7.0

Displaying areas with circles

To display a circle on the map, pass Set<Circle> to the circles property of the GoogleMap class.

Circle class

https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/Circle-class.html

• circleId
  • Set CircleId to uniquely identify the Circle.
• center
  • Set the center position of the Circle using LatLng.
• radius
  • Specify the radius of the circle in meters. The default value is 0.

Sample implementation

Let's try displaying a circle on the map right away.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GoogleMapsFlutterCircles extends StatefulWidget {
  const GoogleMapsFlutterCircles({super.key});

  @override
  State<GoogleMapsFlutterCircles> createState() =>
      GoogleMapsFlutterCirclesState();
}

class GoogleMapsFlutterCirclesState extends State<GoogleMapsFlutterCircles> {
  final Completer<GoogleMapController> _controller =
      Completer<GoogleMapController>();

  static const CameraPosition _initialCameraPosition = CameraPosition(
    target: LatLng(35.68123428932672, 139.76714355230686),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Maps Flutter Circles')),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        circles: {
          Circle(
            circleId: const CircleId('circle_1'),
            center: const LatLng(35.68123428932672, 139.76714355230686),
            radius: 500,
            fillColor: Colors.red.withOpacity(0.5),
            strokeWidth: 5,
          ),
        },
      ),
    );
  }
}

I have implemented it to draw a circle with a radius of 500m centered on the initial camera position.

When executed, it looks like this. The circle also scales according to the map's zoom level.

Displaying areas with rectangles

To display a rectangular area on the map, pass Set<Polygon> to the polygons property of the GoogleMap class.

Polygon class

https://pub.dev/documentation/google_maps_flutter/latest/google_maps_flutter/Polygon-class.html

• polygonId
  • Set PolygonId to uniquely identify the Polygon.
• points
  • Set the vertices of the polygon to be drawn using List<LatLng>.
• holes
  • As the name suggests, you can configure multiple holes within the rectangle.
  • Set using List<List<LatLng>>.

Sample implementation

First, let's try displaying a simple Polygon that surrounds the center point.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class GoogleMapsFlutterPolygon extends StatefulWidget {
  const GoogleMapsFlutterPolygon({super.key});

  @override
  State<GoogleMapsFlutterPolygon> createState() =>
      GoogleMapsFlutterPolygonState();
}

class GoogleMapsFlutterPolygonState extends State<GoogleMapsFlutterPolygon> {
  final Completer<GoogleMapController> _controller =
      Completer<GoogleMapController>();

  static const CameraPosition _initialCameraPosition = CameraPosition(
    target: LatLng(35.68123428932672, 139.76714355230686),
    zoom: 14.4746,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Maps Flutter Polygon')),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
        polygons: {
          Polygon(
            polygonId: const PolygonId('polygonId'),
            points: const [
              LatLng(35.684072, 139.765456), // Northwest
              LatLng(35.684072, 139.768794), // Northeast
              LatLng(35.678400, 139.768794), // Southeast
              LatLng(35.678400, 139.765456), // Southwest
            ],
            strokeWidth: 2,
            strokeColor: Colors.red,
            fillColor: Colors.blue.withOpacity(0.5),
          ),
        },
      ),
    );
  }
}

When executed, it looks like this:

Next, I'll try using holes to create openings within the rectangle.

Specify holes in the previous Polygon with the following content:

            holes: const [
              [
                LatLng(35.682072, 139.766456), // Northwest
                LatLng(35.682072, 139.767456), // Northeast
                LatLng(35.681072, 139.767456), // Southeast
                LatLng(35.681072, 139.766456), // Southwest
              ],
              [
                LatLng(35.680072, 139.767456), // Northwest
                LatLng(35.680072, 139.768456), // Northeast
                LatLng(35.679072, 139.768456), // Southeast
                LatLng(35.679072, 139.767456), // Southwest
              ],
            ],

When executed, you can see that two holes have been created within the rectangle as shown below.

Reference URL

https://medium.com/@rishi_singh/how-to-create-polygon-polyline-circle-and-marker-on-google-maps-flutter-720ea5338e02