Flutter — Google Map with Custom Marker📍

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

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

@UIApplicationMain
@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
    GMSServices.provideAPIKey("YOUR-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});
@override
  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: {
  Marker(
    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
  ),
  
  Marker(
    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() {
  addCustomIcon();
  super.initState();
}
void addCustomIcon() {
  BitmapDescriptor.fromAssetImage(
          const ImageConfiguration(), "assets/Location_marker.png")
      .then(
    (icon) {
      setState(() {
        markerIcon = icon;
      });
    },
  );
}

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

Marker(
  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 👇

Flutter Google Map With Live Location Tracking — Uber Style

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

Bonus 🥳 Shop UI Kit

FlutterShop - Premium E-commerce UI kit for Flutter

Clap 👏 If this article helps you.