Skip to content

Latest commit

 

History

History
90 lines (71 loc) · 3.05 KB

README.md

File metadata and controls

90 lines (71 loc) · 3.05 KB

google_maps_custom_marker

pub package

A flexible package for creating various shapes of highly customizable markers with optional labels.

screenshot from example

Features

Use this package in your Flutter app to:

  • Dynamically create markers to use with google_maps_flutter
  • Add text labels to markers
  • Create circle, pin, and text bubble marker shapes
  • Customize the appearance, including options for colors, padding, shadow, and more

Getting started

  1. Follow the instructions for getting started with google_maps_flutter
  2. Create a marker with your desired position and other properties
  3. Import this package, pass your marker to GoogleMapsCustomMarker.createCustomMarker()
  4. Configure the shape, style, and shape-specific options
  5. The returned marker has the updated icon and anchor, and is ready for use with your map

Usage

Marker pinMarker = await GoogleMapsCustomMarker.createCustomMarker(
    marker: const Marker(
        markerId: MarkerId('pin'),
        position: LatLng(49,-123),
    ),
    shape: MarkerShape.pin,
    title: '99',
);

Marker circleMarker = await GoogleMapsCustomMarker.createCustomMarker(
    marker: const Marker(
        markerId: MarkerId('circle'),
        position: LatLng(49.01,-123),
    ),
    shape: MarkerShape.circle,
    title: '99',
);

Marker bubbleMarkerCustomized = await GoogleMapsCustomMarker.createCustomMarker(
    marker: const Marker(
        markerId: MarkerId('bubble'),
        position: LatLng(49.02,-123),
    ),
    shape: MarkerShape.bubble,
    title: 'Customize Me!',
    backgroundColor: GoogleMapsCustomMarkerColor.markerYellow.withOpacity(.8),
    foregroundColor: Colors.black,
    textSize: 38,
    enableShadow: false,
    padding: 150,
    textStyle: const TextStyle(decoration: TextDecoration.underline),
    imagePixelRatio: 1.5,
    bubbleOptions: BubbleMarkerOptions(
        anchorTriangleWidth: 32,
        anchorTriangleHeight: 48,
        cornerRadius: 12,
    ),
);

_markers.addAll([pinMarker, circleMarker, bubbleMarkerCustomized]);

Additional information

This package was developed to help more easily create beautiful, semantic maps.

If you have suggestions for changes, additions, or would like to contribute, that is more than welcome.