https://github.com/robert01101101/google_maps_custom_marker

A flexible flutter package for creating various shapes of highly customizable google maps markers with optional labels.
https://github.com/robert01101101/google_maps_custom_marker

circle dart flutter flutter-package google-maps label marker package pin

Last synced: 24 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/robert01101101/google_maps_custom_marker
• Owner: Robert01101101
• License: apache-2.0
• Created: 2024-09-16T09:04:54.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2024-09-27T23:31:51.000Z (about 1 month ago)
• Last Synced: 2024-10-13T02:41:08.525Z (24 days ago)
• Topics: circle, dart, flutter, flutter-package, google-maps, label, marker, package, pin
• Language: Dart
• Homepage: https://pub.dev/packages/google_maps_custom_marker
• Size: 488 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# google_maps_custom_marker

[![pub package](https://img.shields.io/pub/v/google_maps_custom_marker.svg)](https://pub.dev/packages/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

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

```dart

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.