google_maps_custom_marker
A flexible package for creating various shapes of highly customizable markers with optional labels.
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
- Follow the instructions for getting started with
google_maps_flutter
- Create a marker with your desired position and other properties
- Import this package, pass your marker to
GoogleMapsCustomMarker.createCustomMarker()
- Configure the shape, style, and shape-specific options
- 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.