title: Scale image and markers on zoom
body: <p>I have an image (of a country) that acts like a map. On this image I've placed city markers. I need to zoom in/out the image, but keep the markers in same place.</p>
  
  <p>I'm scaling the image with this: </p>
  
  <pre><code>var $map = $('#map-img'),
      $mapW = $map.width(),
      $mapH = $map.height();
  
  $(document).on('click', '.zoom', function(e){
      e.preventDefault();
  
      var $this = $(this),
          type,
          scale = 1,
          scale_factor = 0.125,
  
  
      //css transform map
      $map.css({
          '-moz-transform':  'scale(' + scale + ')',
          '-webkit-transform':   'scale(' + scale + ')',
          '-o-transform':  'scale(' + scale + ')',
          '-ms-transform':  'scale(' + scale + ')',
          'transform':  'scale(' + scale + ')'
      });
  
      // recalculate width and height of map
      $map_data = $map[0].getBoundingClientRect();
  
      var $mH  = $map_data.height;
      var $mW  = $map_data.width;
  
      $('.point').each(function(k, obj){
  
          var $this = $(this);
  
          // calculate top / left position from element css without 'px'
          var $top_px = ($this.css('top').replace(/[^-\d\.]/g, '') / $mapH) * 100;
          var $left_px = ($this.css('left').replace(/[^-\d\.]/g, '') / $mapW) *100;
  
          $this.css({
              'top' : $top_px +'%',
              'left' : $left_px +'%'
          });
  
      });
  
  });
  </code></pre>
  
  <p>Currently when I click on zoom, the map image scales, but markers stay in same place.</p>
  
  <p>What I want to achieve: On click zoom button (doesn't matter if zoom-in or zoom-out is clicked), I want to scale the image and move markers to their new calculated position, same as google maps.</p>
  
  <p>Could anyone point out an idea? 
  Thank you</p>
  
  <p><strong>Update 1</strong></p>
  
  <p>Now i'm recalculating these, $mapH, $mapW like this (I have edited my code above):</p>
  
  <pre><code>$map_data = $map[0].getBoundingClientRect();
  var $mH  = $map_data.height;
  var $mW  = $map_data.width;
  </code></pre>
  
  <p>This because when transform is applied, the actual width and height of an element is not changed, so I use getBoundingClientRect() to get transformed width/height.</p>
  
  <p>My problem here is that, when the image is scaled, i want to move my markers also and here is were I'm stuck.</p>
  
  <p><strong>Update 2</strong> </p>
  
  <p>The ratio I'm using is 0.125 and if I multiply this to top / left positions of markers, the markers always move diagonally from top - left to right - bottom, this is not the desired result. </p>
  
  <p>Instead I want to move them from initial marker position to scaled position in every direction -- top, right, bottom, left -- at the same time and evenly.</p>