Aligning image to the center of a google-map div

Question

I am trying to align an image to the center of a google map div.

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.

here's how it works in uber. https://youtu.be/U9A86Nh75xQ?t=36s

here is my sample body code

<body>
<div id="map"></div>
<div id="static-img">
<img src="http://mt.googleapis.com/vt/icon/name=icons/spotlight/spotlight-poi.png">
</div>
<script>
  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!'
 });
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>

this is the css

   html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }

  #static-img{
    position:absolute;
    top:44%;
    width:100%;
    text-align:center;
  }

here is a test jsfiddle https://jsfiddle.net/pyu8rqso/1/

How should i go about fixing this one?

provide an example of the uber functionality you are referring to; no reason to expect people to know what that is — justinw, Apr 03 '16 at 22:57
you can handle the google maps resize event to update the position of the marker on the map. [Check this](http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive) — Bharat Gupta, Apr 04 '16 at 04:26

score 1 · Answer 1 · answered Apr 04 '16 at 04:19

If you would like to make the marker to always be centered within the map, you would use the Google Maps Api to accomplish that.

You can do this by setting up an event listener for the drag events and you could create a function that updates the marker coordinates on drag. (you might also want to create listeners for scroll and other events as well)

EXAMPLE

function markPos() {
    marker.setPosition( map.getCenter() );
}

google.maps.event.addListener(map, 'drag', function() {
    markPos();
});

If for some reason you want to center align an html element, over the #map element; your original fiddle is close but it's better to center your elements by first positioning it (like you've done) but add these rules/values to get the true center of the parent element:

top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);

This will vertically center your child element properly, but note the center of the parent elements does not always represent the center of the map. You can change that by adding in that top: 44% rule you had in there.

Fixed it by referencing to this answer. http://stackoverflow.com/questions/19327254/is-there-a-way-to-fix-a-google-maps-marker-to-the-center-of-its-map-always ,Your solution was close enough. Thanks for the help. — , Apr 04 '16 at 05:14

Aligning image to the center of a google-map div

1 Answers1