Custom Google Map Markers In Flutter
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 :
Our Flutter Tutorial gives essential and progressed ideas of the Flutter framework. It is free and open-source. At first, it was created by 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.3Step 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.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
