How to create a google map custom marker in Flutter

You can copy and adopt this source code example to your flutter project easily without issues.

Add this code to your pubspec.yaml file

 permission_handler: ^3.0.1
google_maps_flutter: ^0.5.19

Create a custom_marker_map.dart file (use any name of your choice) and add this code:

 import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class CustomMarker extends StatefulWidget {
  @override
  _CustomMarkerState createState() => _CustomMarkerState();
}

class _CustomMarkerState extends State<CustomMarker> {
  Completer<GoogleMapController> _controller = Completer();

  static const LatLng _center = const LatLng(45.521563, -122.677433);

  void _onMapCreated(GoogleMapController controller) {
    _controller.complete(controller);
  }

  //static const LatLng _center = const LatLng(45.521563, -122.677433);

  static MarkerId markerId = MarkerId("1");

  final Set<Marker> _markers = {
    Marker(
markerId: markerId,
position: _center,
infoWindow: InfoWindow(
  title: 'Custom Marker',
          snippet: 'Inducesmile.com',
)


    )
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Map with Custom Marker'),
          backgroundColor: Colors.red,
        ),
        body: GoogleMap(
          markers: _markers,
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
          ),
        ),
      ),
    );
  }
}

In your main.dart file (main entry point of the app), add this:

import 'package:inducesmile/custom_marker_map.dart.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Code Snippets',
      theme: new ThemeData(primarySwatch: Colors.red),
      home: new CustomMarker(),
    );
  }
}

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

Add a Comment