Flutter — Google Map with Custom Marker📍

The Flutter Way
Flutter Community
Published in
4 min readOct 9, 2022


Let’s add Google Maps to your Flutter app and replace the boring marker with a fancy one.

Get the API Key

If you want to use Google Maps in your Flutter application, you’ll need to configure an API project with Google Maps Platform.

  1. Go to the Google Maps Platform > Create new project or use existing one.
  2. On the Library page > Search for “Maps SDK”.
  3. Click on Maps SDK for iOS and then click Enable.
  4. Click Maps SDK for Android and then click Enable
  5. On the Credentials page, click Create credentials > API key. (The API key created dialog displays your newly created API key.)
  6. The new API key is listed on the Credentials page under API keys. To rename it click on the edit icon. (Pro tips: Restrict the API key before using it in production.)

If you’re having trouble getting your API key, check out this video👇

Adding Google Maps Flutter package as a dependency

In Flutter, packages allow you to add additional functionality. Run this command

flutter pub add google_maps_flutter

or add the package under dependencies

google_maps_flutter: ^2.2.1

Adding an API key for an Android app

To add an API key to the Android app, edit the AndroidManifest.xml file in android/app/src/main. Add a single meta-data entry containing the API key created in the previous step inside the application node.

<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>

Also set the minSdkVersion to 20 in android/app/build.gradle

android {
defaultConfig {
minSdkVersion 20

Adding an API key for an iOS app

To add an API key to the iOS app, edit the AppDelegate.swift file in ios/Runner. Replace entire code with below 👇

import UIKit
import Flutter
import GoogleMaps // Add this import

@objc class AppDelegate: FlutterAppDelegate {
override func application(
_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
GeneratedPluginRegistrant.register(with: self)

// TODO: Add your Google Maps API key

return super.application(application, didFinishLaunchingWithOptions: launchOptions)

Create Google Map screen

Now it’s time to get a map on the screen. We need an initialCameraPosition to display the map. It can be the user’s current location, but we used a hardcore value for simplicity.

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class MapScreen extends StatefulWidget {
const MapScreen({super.key});
State<MapScreen> createState() => _MapScreenState();
class _MapScreenState extends State<MapScreen> {
LatLng initialLocation = const LatLng(37.422131, -122.084801);
// ToDo: add custom marker@override
Widget build(BuildContext context) {
return Scaffold(
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: initialLocation,
zoom: 14,
// ToDO: add markers
Preview — MapScreen

Add Marker to the map

Markers are useful to identify any specific location. You can add multiple markers to the map. Replace To DO: add markers with this 👇

markers: {
markerId: const MarkerId("marker1"),
position: const LatLng(37.422131, -122.084801),
draggable: true,
onDragEnd: (value) {
// value is the new position
// To do: custom marker icon

markerId: const MarkerId("marker2"),
position: const LatLng(37.415768808487435, -122.08440050482749),

If you allow users to change the marker location then set draggable to true by default its false. onDragEnd provide you the new location LatLng.

Multiple markers preview

Set Custom Image Marker on Map

Added a marker image to my assets then create a method that set the markerIcon. Replace ToDo: add custom marker with below code 👇

BitmapDescriptor markerIcon = BitmapDescriptor.defaultMarker;@override
void initState() {
void addCustomIcon() {
const ImageConfiguration(), "assets/Location_marker.png")
(icon) {
setState(() {
markerIcon = icon;

Back to first marker which markerId is marker1. Set the icon = markerIcon

markerId: const MarkerId("marker1"),
position: const LatLng(37.422131, -122.084801),
draggable: true,
onDragEnd: (value) {
// value is the new position
icon: markerIcon,
Preview with custom marker icon

Complete code 🥳

Next you may check 👇

If I got something wrong? Let me know in the comments. I would love to improve.

Bonus 🥳 Shop UI Kit

Clap 👏 If this article helps you.



The Flutter Way
Flutter Community

Want to improve your flutter skill? Join our channel, learn how to become an expert flutter developer and land your next dream job!