The SDK allows you to easily plot a path on the map using the StaticMapPath class. This class allows you to specify the size, color, outline, and the polyline to be drawn on the map.

StaticMapImage(
  options: StaticMapOptions(
    width: 400,
    height: 400,
    padding: 50,
    overlays: [
      const StaticMapPath(
        polyline:
            'w}seFdghjVrDe@xAS~AQfAMJAZElAO~@KXC~AQWcEGw@IqAS_DEu@OgB?IAOASAQc@qGi@gI_@wFIqAg@gIzAS|ASvDc@l@Gx@Kt@I^G?YHu@DSBGBIJQBE^c@d@o@Pc@FWBKBS?m@g@yHC_@C]c@}GIiASaDKyAAWMeBEk@IoAIkAO{BOaCKqAGcAEk@Eu@IeAIyAMiBEw@SeDE?',
        color: Color(0xffC21DB3),
        outlineColor: Colors.white,
        outlineSize: 3,
        size: 5,
        opacity: 0.7,
        outlineOpacity: 0.6,
      ),
    ],
  ),
);
The polyline string must be encoded using the Encoded Polyline Algorithm Format. You can use google_polyline_algorithm package to encode your path points, or provide the points directly.

The code above will generate the following static map:

​
Providing path points directly

You can provide a list of points directly, and leave it to our package to encode the polyline for you. Use the StaticMapPath.points() constructor, example:

StaticMapImage(
  options: StaticMapOptions(
    width: 400,
    height: 400,
    padding: 50,
    overlays: [
      const StaticMapPath.points(
        points: [
          StaticMapLatLng(37.75761674701297, -122.40401402953965),
          StaticMapLatLng(37.757039681547056, -122.40352562202762),
          StaticMapLatLng(37.756226633751176, -122.4031864501882),
          StaticMapLatLng(37.75531060347513, -122.40306163494934),
          StaticMapLatLng(37.7535385783104, -122.4028635585972),
          StaticMapLatLng(37.75247939808725, -122.4028482876547),
          StaticMapLatLng(37.750542107845945, -122.40326072065741),
          StaticMapLatLng(37.74929131653843, -122.40363787975242),
          StaticMapLatLng(37.74730245046703, -122.40428094958055),
          StaticMapLatLng(37.744790009255006, -122.40508410855259),
          StaticMapLatLng(37.742886632825, -122.40645170642335),
        ],
        color: Color(0xffC21DB3),
        outlineColor: Colors.white,
        outlineSize: 3,
        size: 5,
        opacity: 0.7,
        outlineOpacity: 0.6,
      ),
    ],
  ),
);
Avoid passing a large list of points directly, otherwise users can experience jank during encoding. Instead, install the google_polyline_algorithm package and encode the polyline in an isolate.

The SDK allows you to easily plot a path on the map using the StaticMapPath class. This class allows you to specify the size, color, outline, and the polyline to be drawn on the map.

StaticMapImage(
  options: StaticMapOptions(
    width: 400,
    height: 400,
    padding: 50,
    overlays: [
      const StaticMapPath(
        polyline:
            'w}seFdghjVrDe@xAS~AQfAMJAZElAO~@KXC~AQWcEGw@IqAS_DEu@OgB?IAOASAQc@qGi@gI_@wFIqAg@gIzAS|ASvDc@l@Gx@Kt@I^G?YHu@DSBGBIJQBE^c@d@o@Pc@FWBKBS?m@g@yHC_@C]c@}GIiASaDKyAAWMeBEk@IoAIkAO{BOaCKqAGcAEk@Eu@IeAIyAMiBEw@SeDE?',
        color: Color(0xffC21DB3),
        outlineColor: Colors.white,
        outlineSize: 3,
        size: 5,
        opacity: 0.7,
        outlineOpacity: 0.6,
      ),
    ],
  ),
);
The polyline string must be encoded using the Encoded Polyline Algorithm Format. You can use google_polyline_algorithm package to encode your path points, or provide the points directly.

The code above will generate the following static map:

​
Providing path points directly

You can provide a list of points directly, and leave it to our package to encode the polyline for you. Use the StaticMapPath.points() constructor, example:

StaticMapImage(
  options: StaticMapOptions(
    width: 400,
    height: 400,
    padding: 50,
    overlays: [
      const StaticMapPath.points(
        points: [
          StaticMapLatLng(37.75761674701297, -122.40401402953965),
          StaticMapLatLng(37.757039681547056, -122.40352562202762),
          StaticMapLatLng(37.756226633751176, -122.4031864501882),
          StaticMapLatLng(37.75531060347513, -122.40306163494934),
          StaticMapLatLng(37.7535385783104, -122.4028635585972),
          StaticMapLatLng(37.75247939808725, -122.4028482876547),
          StaticMapLatLng(37.750542107845945, -122.40326072065741),
          StaticMapLatLng(37.74929131653843, -122.40363787975242),
          StaticMapLatLng(37.74730245046703, -122.40428094958055),
          StaticMapLatLng(37.744790009255006, -122.40508410855259),
          StaticMapLatLng(37.742886632825, -122.40645170642335),
        ],
        color: Color(0xffC21DB3),
        outlineColor: Colors.white,
        outlineSize: 3,
        size: 5,
        opacity: 0.7,
        outlineOpacity: 0.6,
      ),
    ],
  ),
);
Avoid passing a large list of points directly, otherwise users can experience jank during encoding. Instead, install the google_polyline_algorithm package and encode the polyline in an isolate.