'Flutter Custom Icon Not Showing on Google Maps
i am creating a custom BitmapDescriptor icon using a method, but when i pass the customMapMarker to the icon param the marker is not being shown on the screen. I think it has something to do with the setMarker method. It is being called in the initState() as the BitmapDescriptor returns a future to the customMarker
Code:
class MapScreen extends StatefulWidget {
const MapScreen({Key? key}) : super(key: key);
@override
State<MapScreen> createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
var markers = [];
late BitmapDescriptor mapMarker;
late GoogleMapController mapController;
static final CameraPosition initicalCameraPosition = CameraPosition(
target: LatLng(31.446893146741793, 74.27705705165864),
zoom: 14.4746,
);
@override
initState() {
super.initState();
setCustomMarker();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: backButton(),
backgroundColor: Colors.blue,
elevation: 0,
title: Center(
child: Text(
'Profile ',
style: TextStyle(color: Colors.white),
),
),
),
body: GoogleMap(
initialCameraPosition: initicalCameraPosition,
onMapCreated: onMapCreate,
zoomControlsEnabled: false,
// onTap: addMarker,
markers: Set<Marker>.from(markers),
),
);
}
void onMapCreate(GoogleMapController Controller) {
mapController = Controller;
animateCamera();
}
void animateCamera() {
mapController
.animateCamera(CameraUpdate.newCameraPosition(initicalCameraPosition));
}
addMarker() async {
Marker marker = Marker(
markerId: MarkerId('123'),
infoWindow: InfoWindow(
title: 'Muhammad Abdulreman', snippet: 'Blood Group: a+'),
icon: mapMarker,
position: LatLng(31.446893146741793, 74.27705705165864));
setState(() {
markers.add(marker);
});
}
setCustomMarker() {
mapMarker =
BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueAzure);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
