Google maps to display three locations with a custom marker images

Question

Need Google map to display three location, with a custom marker images.

These locations are set based on the long-lats I already have in the database. Now I am having a problem, where if the location is exactly on the top border of the map displayed on my screen, the marker image that I have used is 15px * 15px, so it just displays half or in some case it just displays the bottom of the marker (You might get an impression that there is no marker there).

The HTML code that I have tried is shown below:

<div id=mapDiv>
<agm-map   #storeMap 
[latitude]="lat"
[longitude]="lng"
[scrollwheel]="true" 
[zoom]="zoom"
[zoomControl]="false"
[disableDefaultUI]="true"
[mapDraggable]="true"
[styles]="mapstyles"
[mapTypeControl]="false"
[disableDoubleClickZoom]="true"
[streetViewControl]="false"
[panControl]="true"
[clickableIcons]="false"
[scaleControl]="false"  
(mapReady)="storeMapReady($event)">

<agm-marker 
  *ngFor="let m of orderMarkers; let i = index"
  (markerClick)="clickedMarker(m.ServiceCenterId)"
  [latitude]="m.Latitude"
  [longitude]="m.Longitude"
  [iconUrl]="m.icon">
</agm-marker>

</agm-map>

The COMPONENT code that I have tried is shown below:

setMarkers() {
var bounds = (this.orderMarkers.length > 0) ? this.createBoundsForMarkers(this.orderMarkers) : null;
this.zoom = (bounds) ? this.getBoundsZoomLevel(bounds, this.mapDim) : 0;
this.storeMap.setZoom(this.zoom);

}

/**
* create Markers for Bound 
@param markers 
/
createBoundsForMarkers(markers) {
this.$mapDiv = $('#mapDiv');
this.mapDim = {
  height: this.$mapDiv.height(),
  width: this.$mapDiv.width()
}
this.bounds = new google.maps.LatLngBounds();
for (let store of markers) {
  this.bounds.extend(new google.maps.LatLng(store.Latitude, 
store.Longitude));
}
return this.bounds;
}

getBoundsZoomLevel(bounds, mapDim) {
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();

var latFraction = (this.latRad(ne.lat()) - this.latRad(sw.lat())) / Math.PI;

var lngDiff = ne.lng() - sw.lng();
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

var latZoom = this.zoomLocation(mapDim.height, this.WORLD_DIM.height, 
latFraction);
var lngZoom = this.zoomLocation(mapDim.width, this.WORLD_DIM.width, 
lngFraction);
let boundZoom = Math.min(latZoom, lngZoom, this.ZOOM_MAX);
boundZoom--;
return boundZoom;
}

latRad(lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
}

zoomLocation(mapPx, worldPx, fraction) {
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
}

}

How to resolve this?