Custom image icon not positioning - google-maps

Question

I know this sounds duplicate but when I searched here in SO it doesn't help me. my problem is that I have custom icon or image the dimension is 256 x 256, scaledSize this to 50, now the problem is that it does not properly positioning to the latlng. also the problem is that when I zoom the map the marker will move or it will go away to it's position... unlike this example it work's fine
https://developers.google.com/maps/documentation/javascript/examples/icon-complex .
Here is my code
var imageicon= {
url: '/image/' + filename, // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 50) // anchor
};
custommarker= new google.maps.Marker({
flat: true,
icon: imageicon,
map: map,
optimized: false,
position: coordinate,
visible: true
});
Here is my marker

Answer 1

Your icon is 50px by 50px. You currently have the anchor set to (0,50) (the bottom left corner of the icon). You want the anchor set to the "point" at the bottom center (25,50)
var imageicon = {
url: 'https://i.stack.imgur.com/kEvED.png', // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(25, 50) // anchor
};
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { // New York, NY
lat: 40.7127753,
lng: -74.0059728
},
zoom: 7
});
var imageicon = {
url: 'https://i.stack.imgur.com/kEvED.png', // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(25, 50) // anchor
};
var custommarker = new google.maps.Marker({
flat: true,
icon: imageicon,
map: map,
optimized: false,
position: map.getCenter(),
visible: true
});
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>