Flutter Community
Published in

Flutter Community

Flutter — Google Map with Custom Marker📍

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

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👇

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

or add the package under dependencies

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.

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

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

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.

Preview — MapScreen

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

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

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

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

Preview with custom marker icon

Next you may check 👇

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

Clap 👏 If this article helps you.



Articles and Stories from the Flutter Community

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
The Flutter Way

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