title: Aligning image to the center of a google-map div
body: <p>I am trying to align an image to the center of a google map div.</p>
  
  <p>Basically this image is to apply the same functionality as Uber. as in having a floating marker that is always aligned to the center of the map.
  The problem is i can fix it to work for one map size. but if the size of the map div is changed then the image doesn't point to the center of the map anymore.</p>
  
  <p>here's how it works in uber.
  <a href="https://youtu.be/U9A86Nh75xQ?t=36s" rel="nofollow">https://youtu.be/U9A86Nh75xQ?t=36s</a></p>
  
  <p>here is my sample body code</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;div id="static-img"&gt;
  &lt;img src="http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png"&gt;
  &lt;/div&gt;
  &lt;script&gt;
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 28.625789, lng: 77.0547899},
        zoom: 8
      });
  
      var marker = new google.maps.Marker({
  position: map.getCenter(),
  map: map,
  title: 'Hello World!'
   });
    }
  &lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
  async defer&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <p>this is the css</p>
  
  <pre><code>   html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
  
    #static-img{
      position:absolute;
      top:44%;
      width:100%;
      text-align:center;
    }
  </code></pre>
  
  <p>here is a test jsfiddle
  <a href="https://jsfiddle.net/pyu8rqso/1/" rel="nofollow">https://jsfiddle.net/pyu8rqso/1/</a></p>
  
  <p>How should i go about fixing this one?</p>