Add Custom Marker to Google Maps in Flutter

 Adding marker to your google maps, first add google maps package in your pubspec.yaml file.

dependencies:

      google_maps_flutter: ^0.5.24+1

 Install it: Install packages from the command line with flutter

$ flutter pub get

 Import it in your dart code by:

import 'package:google_maps_flutter/google_maps_flutter.dart';

Usage:

 Get an API key at https://cloud.google.com/maps-platform/.

For Android:

Specify your API key in the application manifest file:

android/app/src/main/AndroidManifest.xml

<manifest ...

 <application ...

   <meta-data android:name="com.google.android.geo.API_KEY"

              android:value="YOUR KEY HERE"/>

For iOS:

Specify your API key in the application delegate file:

Ios/Runner/AppDelegate.m

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Swift code:

Or in swift code, specify your API key in the application delegate file:

Ios/Runner/AppDelegate.swift

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Ø Opt-in to The embedded views preview by adding a boolean property to the app's Info.plist file with the key io.flutter.embedded_views_preview and the value YES.

Add Custom Marker

To add a custom marker, make sure your image is added to your project (for ex: under assets/images/fire.png) and ensure your pubspec.yaml is configured so that it pulls the images correctly.

# The following section i s specific to Flutter.

flutter:



  # The following line ensures that the Material Icons font is

  # included with your application, so that you can use the icons in

  # the material Icons class.

  uses-material-design: true



  # To add assets to your application, add an assets section, like this:

  assets:

   - assets/images/

  #  - images/a_dot_ham.jpeg

 I defined my google map page as a Stateful Widget

import 'package:flutter/material.dart';

import 'package:google_maps_flutter/google_maps_flutter.dart';

import 'package:location/location.dart' as LocationManager;






class Map_page extends StatefulWidget {

  @override

  _ Map_pageState createState() => _ Map_pageState();

}



class _Map_pageState extends State<Map_page> {

}


   

 In this, I defined a Bitmap Descriptor variable and as well as markers variable to show the markers on map.

class _HomeState extends State<Home> with WidgetsBindingObserver {




@override

void initState() {

  super.initState();

  markers = Set.from([]);

  

}



  GoogleMapController mapController;



  BitmapDescriptor customIcon1;

  

  Set<Marker> markers;

createMarker(context) {

  if (customIcon1 == null) {

    ImageConfiguration configuration = createLocalImageConfiguration(context);

    BitmapDescriptor.fromAssetImage(configuration, 'assets/images/fire.png')

        .then((icon) {

      setState(() {

        customIcon1 = icon;

      });

    });

  }
}

 Here we use latitude and longitude for user location.            For this we install a package called location. Describe in your pubspec.yaml file

 To use location in iOS, you have to add following in your info.plist file:

NSLocationWhenInUseUsageDescription

NSLocationAlwaysUsageDescription

Future<LatLng> getUserLocation() async {

  LocationManager.LocationData currentLocation;

  final location = LocationManager.Location();

  try {

    currentLocation = await location.getLocation();

    final lat = currentLocation.latitude;

    final lng = currentLocation.longitude;

    final center = LatLng(lat, lng);

    return center;

  } on Exception {

    currentLocation = null;

    return null;

  }

}

 For create marker we need to pass MarkerId & Position to the Marker

@override

Widget build(BuildContext context) {

  createMarker(context);

  return Scaffold(

        body: Container(

    child: SizedBox(

    height: MediaQuery.of(context).size.height,

    child: GoogleMap(

      onMapCreated: _onMapCreated,

      myLocationEnabled: true,

      myLocationButtonEnabled: true,

      initialCameraPosition: const CameraPosition(

        target: LatLng(0.0, 0.0),

      ),

      markers: markers,

      onTap:  (pos) {

        print(pos);

        Marker f =

        Marker(markerId: MarkerId('1'),icon: customIcon1, position: LatLng(23.025857, 72.543423),

        onTap: (){});

        setState(() {

          markers.add(f);

        });

              },

    ),

  ),

);
  );

}