How to fix marker in center of leaflet map after user will drag the map? - leaflet

Question

I am using a custom map on my node add form. My marker is set to my current location using lat and log. Now I want, whenever a user will drag or move map, marker should be in center (fixed). I tried lot of things like:
$cordovaGeolocation.getCurrentPosition(options).then(function(position) {
$scope.latlong = position.coords.latitude + "," + position.coords.longitude;
$rootScope.lati= position.coords.latitude ;
$rootScope.long = position.coords.longitude;
$scope.map.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
zoom: 20
};
$scope.map.markers.now = {
lat: position.coords.latitude,
lng: position.coords.longitude,
message: "Usted esta aqui!",
draggable: false,
focus: true
};
if ($rootScope.locationresults == undefined) {
Util.getAddressOf(position.coords.latitude, position.coords.longitude).then(function(location) {
$rootScope.locationresults = location[0].formatted_address;
console.log(location);
}, function(error) {
console.error(error);
});
}
$scope.$on("leafletDirectiveMap.move", function(event, args) {
$scope.map.markers.now.setLatLng([0,0]).update();
//$scope.map.markers.now.lat = $scope.map.center.lat;
//$scope.map.markers.now.lng = $scope.map.center.lng;
console.info(JSON.stringify($scope.map.markers.now));
});
$scope.$on("leafletDirectiveMap.drag", function(event, args){
console.log(JSON.stringify($scope.map.center));
//$scope.map.markers.now.setLatLng(0,0);
$scope.map.markers.now.lat = $scope.map.center.lat;
$scope.map.markers.now.lng = $scope.map.center.lng;
});
$scope.$on("leafletDirectiveMarker.dragend", function(event, args) {
console.log("moviendo");
$rootScope.lati= args.model.lat ;
$rootScope.long = args.model.lng;
Util.getAddressOf(args.model.lat, args.model.lng).then(function(location) {
$rootScope.locationresults = location[0].formatted_address;
$scope.latlong = args.model.lat + "," + args.model.lng;
console.log(location);
}, function(error) {
console.error(error);
});
});
}, function(error) {
console.log(error);
});

Answer 1

You could place a fake marker, placing a div with background image on top of the map and placing it with absolute position and pointing always to the center of the map.
Example:
.map-container{
position: relative;
width: 300px;
height: 400px;
}
.map-marker-centered{
background-image: url('https://img.icons8.com/color/48/000000/marker--v1.png') no-repeat;
width: 50px;
height: 60px;
position: absolute;
z-index: 20;
left: calc(50% - 25px);
top: calc(50% - 60px);
transition: all 0.4s ease;
}
<div class="map-container">
<div class="map-marker-centered"></div>
<div class="map"></div>
</div>
Result:

Answer 2

You can place a "fake" marker composed from a background image placed always at the center of the map. You can also detect when map moves and get the coordinates to where the marker points to. Run the snippet:
var mymap = L.map('mapid').setView([51.505, -0.09], 13)
// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{ subdomains: ['a', 'b', 'c'] })
.addTo(mymap)
mymap.on("moveend", function () {
console.log(mymap.getCenter().toString());
});
.map {
height: 280px;
z-index: 1;
}
.map-container {
position: relative;
width: 300px;
height: 300px;
}
.map-marker-centered {
background-image: url("https://img.icons8.com/color/48/000000/marker--v1.png");
width: 50px;
height: 48px;
position: absolute;
z-index: 2;
left: calc(50% - 25px);
top: calc(50% - 50px);
transition: all 0.4s ease;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<div class="map-container">
<div class="map-marker-centered"></div>
<div id="mapid" class="map"></div>
</div>