angular2 - jQuery add pixels to position top

Question

I want to position my markers when zoom 18 += 10px up, so what I dit is this:

  his._mapsWrapper.subscribeToMapEvent<void>('zoom_changed').subscribe(() => {
      this._mapsWrapper.getZoom().then((z: number) => {
     this._zoom = z;

     if(z === 18) {
        $('.marker').css({ 'width' : '25px', 'height' : '25px', 'line-height': '25px', 'top' : '+= 10!important' });
        $('.number-id').css({'font-size': '11px'})
     }

But it seems not to work can somebody help me out here? Here is a PLUNKER , where you can see this code in src/google-maps/directive/google-map.ts in the method _handleMapZoomChange()

What it does it is setting all the elements to 10px, but what I basically wants is to set the current top position + 10px.

 $('.marker').each( function (index) {
     console.log(index + ":" + $(this).css('top'));
     var currentTop = $(this).css('top');

     $(this).css('top', currentTop + '10px');
 })

Answer 1

If you are using custom overlay, it can cause unexpected behaviour if you adjust left or top position of the marker, because that is tied to latLng position of the marker.

Instead, just use margin-top css attribute ( margin-top: 10px or margin-top: -10px depending on your needs)

The same thing when drawing the marker, don't adjust position like this:

if (point) {
    div.style.left = (point.x - 10) + 'px';
    div.style.top = (point.y - 10) + 'px'; 
}

Instead add the offset as margin-top and margin-left to your marker's css:

div.style.cssText = `width: 25px; 
                     height: 25px; 
                     ...
                     margin-top: -10px;
                     margin-left: -10px;`