Custom Google Map Markers In Flutter
By: Naveen Srivastava
Tags: Dart, Flutter Widget, Flutter, Flutter App Development, Google Map Platform

Flutter developers favor Google Maps for their application since they give native execution to android and iOS both. It permits us to carry out the code one time and license them to run the code for the two devices android and iOS. Google Maps Flutter module is given in the Google Map widget that upholds initialCameraPosition, maptype and onMapCreated. We can set the situation of the camera and marker in any put on the earth. We can plan the marker as per our decision. It additionally accompanies a zoom property in a cameraposition to give the zooming in google map see on the underlying page.

In flutter, we display a custom marker (icon) in GoogleMap(), which displays an icon and text according to a destination location in our application, which will usually display the location with a custom image.

In this article, we will show how to apply GoogleMaps in a flutter. Along with that, we will see how to use a custom icon for a map marker. so let’s get started.

Table Of Contents :

Flutter Custom Google Map Markers Implementation Code Implement Code File Conclusion

Flutter :

Our Flutter Tutorial gives essential and progressed ideas of the Flutter framework. It is free and open-source. At first, it was created from Google and now oversees by an ECMA standard. Flutter applications use Dart programming language for making an application.

“Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload.”

Custom Google Map Marker :

To show custom google map markers in flutter applications, the google_maps _flutter package has to be used as we do to search for any destination location and it has a current location marker (icon) which google map provides but the user can make this marker a custom marker.

Implementation :

You need to implement it in your code respectively :

Step 1: Add dependencies.

Add dependencies to pubspec — yaml file.

dependencies:

google_maps_flutter: ^2.0.3

Step 2: import the package :

import 'package:google_maps_flutter/google_maps_flutter.dart';

Step 3: Run flutter package get Step 4: Add API key & permisson to app/main/AndroidManifest.xml

<meta-data

android:name="com.google.android.geo.API_KEY"

android:value="YOUR KEY HERE"/>

Step 5: Add permisson to app/main/AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<uses-permission android:name="android.permission.INTERNET"/>

Code Implement :

Let’s make it into our UI file google_map_screen.dart.

Before defining Google Map, we have taken a new dart file inside which the GoogleMap widget and its properties are defined. In its onMapCreated property, we will define the GoogleMapController object. It is used when we have to create a map.

GoogleMap(

onMapCreated: _onMapCreated,

markers: customMarkers.toSet(),

initialCameraPosition: CameraPosition(

target: _center,

zoom: 10.0,

),

), void _onMapCreated(GoogleMapController controller) {

mapController = controller;

}

Now we use the markers property which we have created a list of custom markers that are initialized inside the mapBitmapsToMarkers() method and have defined the marker generator class inside the setState() within the initState().

List<Marker> mapBitmapsToMarkers(List<Uint8List> bitmaps) {

bitmaps.asMap().forEach((mid, bmp) {

customMarkers.add(Marker(

markerId: MarkerId("$mid"),

position: locations[mid].coordinates,

icon: BitmapDescriptor.fromBytes(bmp),

));

});

}



@override

void initState() {

MarkerGenerator(markerWidgets(), (bitmaps) {

setState(() {

mapBitmapsToMarkers(bitmaps);

});

}).generate(context);

}

When we run the application, we ought to get the screen’s output like the underneath screen capture

Code File:

import 'dart:typed_data';

import 'package:custom_google_map_markers/locations.dart';

import 'package:custom_google_map_markers/view/Markergenerator.dart';

import 'package:custom_google_map_markers/view/map_marker.dart';

import 'package:flutter/material.dart';

import 'package:google_maps_flutter/google_maps_flutter.dart';



class GoogleMapScreen extends StatefulWidget {

@override

_GoogleMapScreenState createState() => _GoogleMapScreenState();

}



class _GoogleMapScreenState extends State<GoogleMapScreen> {

GoogleMapController mapController;



final LatLng _center = const LatLng(28.535517, 77.391029);



List<MapMarker> mapMarkers = [];

List<Marker> customMarkers = [];



List<Marker> mapBitmapsToMarkers(List<Uint8List> bitmaps) {

bitmaps.asMap().forEach((mid, bmp) {

customMarkers.add(Marker(

markerId: MarkerId("$mid"),

position: locations[mid].coordinates,

icon: BitmapDescriptor.fromBytes(bmp),

));

});

}



@override

void initState() {

MarkerGenerator(markerWidgets(), (bitmaps) {

setState(() {

mapBitmapsToMarkers(bitmaps);

});

}).generate(context);

}



void _onMapCreated(GoogleMapController controller) {

mapController = controller;

}



@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Custom Marker Demo'),

backgroundColor: Colors.blue,

centerTitle: true,

),

body: Container(

child: GoogleMap(

onMapCreated: _onMapCreated,

markers: customMarkers.toSet(),

initialCameraPosition: CameraPosition(

target: _center,

zoom: 10.0,

),

),

),

);

}



List<Widget> markerWidgets() {

return locations.map((loc) => MapMarker(loc)).toList();

}

}

Conclusion:

In this article, I have explained Custom Google Map Markers in Flutter, which you can modify and experiment with according to your own, this little introduction was from the Custom Google Map Markers from our side.

I hope this blog will provide you with sufficient information in Trying up the Custom Google Map Markers in your flutter project. We will show you the Custom Google Map Markers is?, and work on it in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤

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

Clap 👏 If this article helps you.