widget_marker_google_maps_flutter 1.0.2

Customized google map with widget markers. Enables to show markers with widget code.

widget_marker_google_maps_flutter

This package is a fork of widget_marker_google_map that was created to add support for the new google_maps_flutter_platform_interface: ^2.8.0 changes. And also add new functionality to the WidgetMarkerGoogleMap widget.

Google map with widget markers.

Set up

Follow the steps on google_maps_flutter document.

Migrating to 1.0

The update to the google_maps_flutter_platform_interface: ^2.8.0 changes that DeprecateBitmapDescriptor.fromBytes in favor of BitmapDescriptor.bytes that handles it in a BytesMapBitmap.

Declaring a multiplatform marker

WidgetMarker(
  position: cafePosition,
  markerId: 'cafe',
  widget: Container(
    color: Colors.brown,
    padding: const EdgeInsets.all(2),
    child: Icon(
      Icons.coffee,
      color: Colors.white,
      size: 14 * MarkerGenerator.getDevicePixelRatio(context),
    ),
  ),
)

1.0 Usage and Breaking changes

import 'package:widget_marker_google_maps_flutter/widget_marker_google_map.dart';

Changed markers and widgetMarkers from a Set to a Map This code can be seen in the example below.

WidgetMarkerGoogleMap(
  initialCameraPosition: shibuya,
  mapType: MapType.normal,
  markers: {
    const MarkerId('default_marker'): Marker(
      position: shibuya.target,
      markerId: const MarkerId('default_marker'),
    ),
  },
  widgetMarkers: <MarkerId, WidgetMarker>{
    const MarkerId(
      'cafe',
    ): WidgetMarker(
      position: cafePosition,
      markerId: 'cafe',
      widget: Container(
        color: Colors.brown,
        padding: const EdgeInsets.all(2),
        child: Icon(
          Icons.coffee,
          color: Colors.white,
          size: 14 * MarkerGenerator.getDevicePixelRatio(context),
        ),
      ),
    ),
    const MarkerId(
      'clothes',
    ): WidgetMarker(
      position: clothesShopPosition,
      markerId: 'clothes',
      widget: Container(
        color: Colors.green,
        padding: const EdgeInsets.all(4),
        child: Text(
          'shop',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 10 * MarkerGenerator.getDevicePixelRatio(context),
          ),
        ),
      ),
    ),
    const MarkerId(
      'network_flutterlogo',
    ): WidgetMarker(
      position: flutterLogoPosition,
      markerId: 'network_flutterlogo',
      widget: SizedBox(
        width: 18 * MarkerGenerator.getDevicePixelRatio(context),
        height: 18 * MarkerGenerator.getDevicePixelRatio(context),
        child: Image.network(
          'https://storage.googleapis.com/cms-storage-bucket/0dbfcc7a59cd1cf16282.png',
        ),
      ),
    ),
  },
)

WidgetMarker

You need to insert the list of WidgetMarker to use widget markers. Make sure that you still need to use onTap method when you use gestures.

class WidgetMarker {
  WidgetMarker({
    required this.position,
    required this.markerId,
    required this.widget,
    this.onTap,
  }) : assert(markerId.isNotEmpty);

  final LatLng position;

  /// Keep this unique, otherwise it will not appear.
  final String markerId;

  /// Gestures of widget is disabled.
  /// Use this callback instead.
  final VoidCallback? onTap;

  final Widget widget;
}

If you have any requests or questions, feel free to ask on github.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Devin 💻

Santa Takahashi 💻

Luis Rogelio 💻

This project follows the all-contributors specification. Contributions of any kind welcome!