Custom map markers - Custom Map Markers Using Flutter

Related tags

Map custom_map_markers
Overview

Custom Map Markers

Not only "Everything is a widget" also "Everywhere is a widget".
custom_map_marker is a package that turns runtime widgets into map marker icons.

Features

this package providers the following features:

  • Ability to create runtime map markers using flutter widgets.
  • Capture Images of any list of widgets.

Getting started

First, add custom_map_markers as a dependency in your pubspec.yaml file.

dependencies:
  custom_map_markers: ^0.0.1

Usage

  1. Wrap your GoogleMaps widget with CustomGoogleMapMarkerBuilder.
  2. Define each marker and its custom widget in customMarkers
  3. Once custom markers are ready they will be passed as Set<Marer> in builder function.
final locations = const [  
  LatLng(37.42796133580664, -122.085749655962),  
  LatLng(37.41796133580664, -122.085749655962),  
];  

CustomGoogleMapMarkerBuilder(  
  customMarkers: [  
  MarkerData(  
        marker: Marker(  markerId: const MarkerId('id-1'), position: locations[0]),  
		child: _customMarker('A', Colors.black)),  
  MarkerData(  
        marker: Marker(  markerId: const MarkerId('id-2'), position: locations[1]),  
		child: _customMarker('B', Colors.red)),    
  ],  
  builder: (BuildContext context, Set<Marker>? markers) {  
    if (markers == null) {  
      return const Center(child: CircularProgressIndicator());  
  }  
    return GoogleMap(  
      initialCameraPosition: const CameraPosition(  
        target: LatLng(37.42796133580664, -122.085749655962),  
  zoom: 14.4746,  
  ),  
  markers: markers,  
  onMapCreated: (GoogleMapController controller) { },  
  );  
  },  
)

Not a google map user?

if you are not willing to use google maps you can use CustomMapMarkerBuilder that takes List<widgets> instead of List<MarkerData> and returns List<Uint8List> instead of Set<Marker> so you are free to use captured png images as you need.

Notes:

  1. Make sure your marker widget has boundaries.
  2. This package capture a png image of widget markers once they render, if your widget would take more time to render like Image.network you can use screenshotDelay parameter to daley the capture process making sure that your widget is rendered properly before capturing it.
  3. to run project example you have to add a valid google maps key to android/ios directories.

Features and bugs

Please feel free to:

Comments
  • Markers disappear when rebuild on next bloc state.

    Markers disappear when rebuild on next bloc state.

    Description: Markers appear when State1 occurs as soon as State2 event is received, map rebuilds, and markers disappear. Please see the logs. My use case is to display/remove markers dynamically based on bloc states.

    Version: 0.0.2 Flutter version: 2.10.0 Simulator: iOS 13 mini (15.2)

    Code:

     Widget _buildMap() {
    print("_buildMap");
    return CustomGoogleMapMarkerBuilder(
        key: Key('custom_google_map_marker'),
        customMarkers: _customMarkers,
        // screenshotDelay: Duration(seconds: 3),
        builder: (BuildContext context, Set<Marker>? markers) {
          print("_customMarkers: ${_customMarkers.length}");
          print("markers: ${markers?.length}");
          print("----------------");
                    
           return GoogleMap(
               markers: markers ?? {},
               ....
                    );
       }
    }

     _customMarkers.add(MarkerData(
        marker: Marker(
          markerId: MarkerId('marker'),
          position: _latLng,
          anchor: Offset(0.5, 1.0),
        ),
        child: MyMarker(
          title: 'Custom Marker',
        ),
      ));

    Logs:

     build
 builder -> state: InitialState()
 _buildMap
 _customMarkers: 0
 markers: 0
 ----------------
 builder -> state: State1()
 setMapMarkers
 _buildMap
 _customMarkers: 2
 markers: null
 ----------------
 _customMarkers: 2
 markers: 2
 ----------------
 builder -> state: State2()
 _buildMap
 _customMarkers: 2
 markers: null
 ----------------
    opened by mehtabghani 3
  • Solve marker blinking issue

    Solve marker blinking issue

    • Solved marker blinking issue every time when map reloads or when we add a marker to the existing list or remove or update the marker list. issue related to https://github.com/IbrahimTabba/custom_map_markers/issues/5
    opened by KishanBusa8 0
  • Please update about WidgetsBinding

    Please update about WidgetsBinding

    Thank you for making a convenient and great widget.

    Please update about WidgetsBinding in Flutter 3.0 or later.

    Also i'm having a problem with the icon rebuilding when I call setState.

    opened by kim-mini6 0
  • disable map reload

    disable map reload

    reload I think is so bad UX for user

    an example is for test data which build it in if we get data from the server and wait for data and reload the map takes many seconds. please find a right way to implement this issue

    opened by rahmanrezaee 3
  • on tap of marker

    on tap of marker

    https://user-images.githubusercontent.com/64520575/165264795-69272738-904d-4847-a009-9b61e4520e9b.mov

    hello when I use a custom marker and. when I clicked on that particular market at that time my all markers a rebuilt. so how to solve this issue

    opened by vivekdhameliya2 1
Owner
null
GitHub
Flutter package to enable clustering of location markers on Google Maps using widgets specific to each location.

flutter_google_maps_widget_cluster_markers This widget implements a very specific adaptation of google_maps_cluster_manager, allowing different ,marke

Kek Tech 2 Jan 6, 2023
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
Stateful map controller for Flutter Map

Map controller Stateful map controller for Flutter Map. Manage markers, lines and polygons. View the web demo Usage import 'dart:async'; import 'packa

null 55 Sep 15, 2022
A map tour guide mobile app based on Flutter, an AI travel notes product integrating map tour guide and UGC.

A map tour guide mobile app based on Flutter, an AI travel notes product integrating map tour guide and UGC. Through the combination of 5g + AI, colle

null 24 Jan 14, 2022
A Flutter package for place search using MapBox Api and for Static map image

About This package provides easy api calls to MapBox Search API. Also, it contains an static map image generator ?? . Maki Icons can be used now in ma

Ketan Choyal 63 Dec 2, 2022
A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

A new flutter plugin for mapbox. You can use it for your map backgrounds inside flutter applications

Boris Gautier 5 Sep 14, 2022
A flutter package for select a city from svg map.

City Picker From Map A flutter package for select a city from svg map. Supported countries (+150) are here. Screenshots Getting Started In the pubspec

Ahmet ÇELİK 49 Nov 17, 2022
Flutter Tutorial - Google Map with Live Location Tracking

Flutter Tutorial - Google Map with Live Location Tracking Build Google Map app with Live Location Tracking in Flutter. ✌   App Preview Android Preview

Samuel Adekunle 10 Dec 22, 2022
Map Picker for Flutter

Map Pin Picker A Vendor-free map Library for Easy and Quick Usage. Follow the steps to integrate Google Maps (https://pub.dev/packages/google_maps_flu

Akbar 16 Jul 15, 2022
Flutter Google Map Example - Day 41

Flutter Google Map Example - Day 41 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter Google Map Exa

Mohammad Rahmani 74 Jan 3, 2023
Flutter plugin to display a simple flat world map with animated points in real time

Flutter Simple Map Flutter plugin to display a simple flat world map with animated points in real time. Can be used as a presentation of online users,

Vladyslav Korniienko 7 Dec 8, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Dec 28, 2022
🌍 Map location picker component for flutter Based on google_maps_flutter

google_map_location_picker Location picker using the official google_maps_flutter. I made This plugin because google deprecated Place Picker. Using Pu

Ibrahim Eid 189 Dec 5, 2022
A map widget with live position updates for Flutter

Livemap A map widget with live position updates. Based on Flutter map and Geolocator. Provides a controller api to handle map state changes. Example i

null 45 Sep 28, 2022
Flutter Google Map Example

Flutter Google Map Example A Flutter application demonstrate google map. Preview Listener and Marker Compass MapTypes Plugin google_maps_flutter from

Bhavik Makwana 67 Sep 14, 2021
How To Integrate Customized Google Map in Flutter

How To Integrate Customized Google Map in Flutter Let’s develop a customised Google Maps for the best user experience. Visit : https://medium.com/flut

Jaimil Patel 19 Dec 6, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Usage Add flutter_map to your pubspec: dependencies: flutter_map: any # or the latest

AppTree Software, Inc 114 Dec 13, 2022
Flutter Aris Map Application

Flutter Aris Map Application Version 1️⃣ . 0️⃣ . 0️⃣ ➕ 1️⃣ 4️⃣ Getting Started $ git clone https://github.com/ariscybertech/aris_map.git $ flutter pac

Behruz Hurramov 4 Dec 22, 2022
A Flutter map widget inspired by Leaflet

flutter_map A Dart implementation of Leaflet for Flutter apps. Installation Add flutter_map to your pubspec: dependencies: flutter_map: any # or the

null 2.2k Jan 3, 2023