Flutter package to enable clustering of location markers on Google Maps using widgets specific to each location.

Overview

flutter_google_maps_widget_cluster_markers

Alt Text

This widget implements a very specific adaptation of google_maps_cluster_manager, allowing different ,markers to be shown depending on whether it is a Cluster or a Place (Cluster of size 1). Different markers can also be shown depending on its location (allows the marker to wait for information from external APIs).

1. Getting started

1.1. Dependencies

Add the following dependencies to your pubspec.yaml

1.2. Setup

Follow setup on

  • google_maps_flutter to enable Google Maps

2. Usage

Just call the GoogleMapWidgetClusterMarkers constructor to instantiate the widget.

A controller can be supplied to expose more package functions, e.g. to refresh the map or update places.

GoogleMapWidgetClusterMarkersController controller = GoogleMapWidgetClusterMarkersController()


GoogleMapWidgetClusterMarkers(
          controller: controller,
          clusterMarkerTextStyle: const TextStyle(
            fontSize: 100,
            fontWeight: FontWeight.w600,
            color: Colors.white,
          ),
          places: [
            MyPlace(
              name: 'Tottenham Court Road',
              latLng: const LatLng(51.51630, -0.13000),
            ),
            MyPlace(
              name: 'Chinatown',
              latLng: const LatLng(51.51090, -0.13160),
            ),
            MyPlace(
              name: 'Covent Garden',
              latLng: const LatLng(51.51170, -0.12400),
            ),
            MyPlace(
              name: 'Imperial College',
              latLng: const LatLng(51.4988, -0.1749),
            ),
          ],
          defaultPlaceMarker: Container(
            color: Colors.orange,
            height: 100,
            width: 100,
            child: const Icon(
              Icons.circle,
              size: 150,
            ),
          ),
          defaultClusterMarker: const Icon(
            Icons.hexagon,
            size: 150,
          ),
          clusterMarker: const Icon(
            Icons.hexagon,
            size: 150,
          ),
          placeMarkerBuilder: (latLngId) => Stack(
            alignment: Alignment.center,
            children: [
              const Icon(
                Icons.circle,
                size: 150,
              ),
              Text(
                /// This can return data from some API query.
                '${Random().nextInt(9)}',
                style: const TextStyle(
                  fontSize: 80,
                  fontWeight: FontWeight.w600,
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),

3. Additional information

3.1. How it works

There are three types of build cycles, used to implement the package

3.1.1. An initMapTripleBuildCycle, which occurs the first time GoogleMap is built

FIRST BUILD

  1. DefaultRepaintBoundaryGenerator builds
  2. DefaultRenderRepaintBoundaries converted to DefaultBitmaps
  3. GoogleMap built
  4. ClusterManager initialised (with Places, GoogleMapController.id) but no clusters in view (because map has not rendered)
  5. GoogleMap renders and calls onCameraIdle

SECOND BUILD

  1. MapState.refreshMarkerBuilderAndUpdateMarkerCallback() to get clusters in view and use DefaultBitmaps

THIRD BUILD

  1. MapState.updateCachedPlacesAndClusters() splits clusterManager.clusters into a List and List in state (so that there is a cached reference when updateMap is called). CachedCluster and CachedPlace contain a repaintBoundaryKey and clusterManagerId (so that markerBuilder knows which one to use). Additionally, CachedCluster contains clusterSize to display on the Marker, and CachedPlace contains the latLngId so that API requests can be made to furnish the Marker with information (e.g., occupancy).
  2. ClusterBoundaryGenerator and PlaceBoundaryGenerator then builds a RepaintBoundary for each CachedCluster and CachedPlace, using both the repaintBoundaryKey and other info (clusterSize, latLngId)
  3. MapState.storeBitmapsInCache() then converts each CachedPlace and CachedCluster repaintBoundaryKey into a bitmap and stores it
  4. ClusterManager.updateMap is then called, and markerBuilderCallback uses the newly generated bitmaps

3.1.2. A refreshMapDoubleBuildCycle, which occurs whenever the GoogleMap is refreshed

FIRST BUILD

  1. MapState.refreshMarkerBuilderAndUpdateMarkerCallback() to get clusters in view and use DefaultBitmaps

SECOND BUILD

  1. MapState.updateCachedPlacesAndClusters() splits clusterManager.clusters into a List and List in state (so that there is a cached reference when updateMap is called). CachedCluster and CachedPlace contain a repaintBoundaryKey and clusterManagerId (so that markerBuilder knows which one to use). Additionally, CachedCluster contains clusterSize to display on the Marker, and CachedPlace contains the latLngId so that API requests can be made to furnish the Marker with information (e.g., occupancy).
  2. ClusterBoundaryGenerator and PlaceBoundaryGenerator then builds a RepaintBoundary for each CachedCluster and CachedPlace, using both the repaintBoundaryKey and other info (clusterSize, latLngId)
  3. MapState.storeBitmapsInCache() then converts each CachedPlace and CachedCluster repaintBoundaryKey into a bitmap and stores it
  4. ClusterManager.updateMap is then called, and markerBuilderCallback uses the newly generated bitmaps

3.1.3. An updatePlacesDoubleBuildCycle, which occurs occurs whenever the places in clusterManager is updated. This cycle uses the second and third build of initMapTripleBuildCycle

FIRST BUILD

  1. MapState.refreshMarkerBuilderAndUpdateMarkerCallback() to get clusters in view and use DefaultBitmaps

SECOND BUILD

  1. MapState.updateCachedPlacesAndClusters() splits clusterManager.clusters into a List and List in state (so that there is a cached reference when updateMap is called). CachedCluster and CachedPlace contain a repaintBoundaryKey and clusterManagerId (so that markerBuilder knows which one to use). Additionally, CachedCluster contains clusterSize to display on the Marker, and CachedPlace contains the latLngId so that API requests can be made to furnish the Marker with information (e.g., occupancy).
  2. ClusterBoundaryGenerator and PlaceBoundaryGenerator then builds a RepaintBoundary for each CachedCluster and CachedPlace, using both the repaintBoundaryKey and other info (clusterSize, latLngId)
  3. MapState.storeBitmapsInCache() then converts each CachedPlace and CachedCluster repaintBoundaryKey into a bitmap and stores it
  4. ClusterManager.updateMap is then called, and markerBuilderCallback uses the newly generated bitmaps

3.2. Note:

  • clusterManagerId == ClusterManager.cluster.getId(), has format lat_lng_clusterSize
  • latLngId has format lat_lng
  • RepaintBoundary is converted into Bitmap via: RepaintBoundary > RenderRepaintBoundary > Image > ByteDate > BitmapDescriptor

TODO: how to contribute to the package, how to file issues, what response they can expect from the package authors, and more.

You might also like...

A Flutter plugin which provides 'Picking Place' using Google Maps widget

A Flutter plugin which provides 'Picking Place' using Google Maps widget

Google Maps Places Picker Refractored This is a forked version of google_maps_place_picker package, with added custom styling and features.

Nov 13, 2022

A Flutter app using Google Maps SDK & Directions API

A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Mar 28, 2022

A Flutter app using Google Maps SDK & Directions API

 A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Dec 31, 2022

Google Places - Google places autocomplete widgets for flutter.

Google Places - Google places autocomplete widgets for flutter.

flutter_google_places Google places autocomplete widgets for flutter. Getting Started For help getting started with Flutter, view our online documenta

Jan 5, 2023

A flutter plugin for Google Maps

A flutter plugin for Google Maps

IMPORTANT: This plugin is no longer under development Why? We initially built this plugin to fill an early gap in flutter. Since then, Google has made

Dec 29, 2022

Flutter Google Maps Tutorial

Flutter Google Maps Tutorial YouTube Video Setup Get an API Key at https://cloud.google.com/maps-platform/ Enable Maps SDK for Android, Maps SDK for i

Nov 30, 2022

Easy Google Maps for Flutter

Easy Google Maps for Flutter

easy_google_maps Easy Google Maps for Flutter on Web and Mobile Getting Started Mobile Follow setup for Mobile Here Web Good to go! EasyGoogleMaps(

Jul 19, 2022

Place picker on Google Maps for Flutter

Place picker on Google Maps for Flutter

Google Maps Place Picker A Flutter plugin which provides 'Picking Place' using Google Maps widget. The project relies on below packages. Map using Flu

Dec 16, 2022

Simple flutter app demonstrating usage of Google Maps

flutter_maps_example Get an API key at GoogleCloud. Enable Google Map SDK for ea

Nov 23, 2022
Comments
Releases(v0.0.1)
  • v0.0.1(Sep 27, 2022)

  • v0.0.0(Sep 9, 2022)

Owner
Kek Tech
Kek Tech
A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin

maps_demo A Flutter example to use Google Maps in iOS and Android apps via the embedded Google Maps plugin Google Maps Plugin Getting Started Get an A

Gerry High 41 Feb 14, 2022
Custom map markers - Custom Map Markers Using Flutter

Custom Map Markers Not only "Everything is a widget" also "Everywhere is a widge

null 8 Oct 19, 2022
A migration of Google Maps Application with Flutter & Google Maps APIs including: Maps SDK for Android & IOS, Places API & polylines

google_maps A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

TAD 1 Mar 4, 2022
Easy to use Animated Maps Markers with a detail card. Use it for a store or any place locator.

interactive_maps_marker for Flutter Easy to use Animated Maps Markers with detail card. Use it for store or any place locator. Demo Usage Add this pac

Atiq Samtia 95 Dec 28, 2022
Flutter Maps A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Salsabil Mohamed Hemada 1 Jul 15, 2022
Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster

Flutter Map Marker Cluster A Dart implementation of Leaflet.markercluster for Flutter apps. This is a plugin for flutter_map package Usage Add flutter

Lorenzo Pongetti 177 Jan 2, 2023
This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with simple smooth animations, making a nice UI and UX.

search_map_place This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with

Lucas Bernardi 127 Oct 22, 2022
A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Youhaan bootwala 1 Mar 18, 2022
A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Varun CN 2 Apr 19, 2022
A car rental flutter application using firebase and google maps API

A car sharing & rental app using Flutter, Firebase & Google Maps APIs ?? About the App ?? hopOn is flutter based application for car sharing and renta

Shivani Singh 97 Dec 30, 2022