Google Map not centering properly when in a scaling circle

Question

I have been trying to get my head around this issue for hours now - no result so far, so I am turning to you now.

I have embedded a google map in my website. Then I gave the div a border-radius of 100% in order to make the map appear circular. So far, so good.

But when I wanted to make the circle scalable/responsive, I tried to use the old padding-bottom css-hack which I found ages ago here on stack overflow. Thanks to this trick, the circular map scales perfectly well now.

However, this also seems to set the map off center and I cannot figure out why or come to a fix. I am really looking forward to any solution here ...

Best regards,

Jan

I have a fiddle demonstrating the issue here (With complete HTML/JS/CSS) CSS below:

.cms-map-wrapper.circular {
    width: 50%;
    margin: auto;
    background-color:red;
}

.cms-map {
        border: solid 5px blue;
        border-radius: 100%;
        padding-bottom: 100%;
        margin-bottom: 20px;
}

geocodezip · Accepted Answer · 2014-12-19T18:31:48.227

It is a timing problem. One option to fix it is to delay, then trigger the resize event and reset the center of the map.

setTimeout(function () {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(position);
        }, 100);

proof of concept fiddle

working code snippet:

function showMapWithAddress(mapElementId, address) {

  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      position = results[0].geometry.location;

      var mapProp = {
        center: position,
        zoom: 14
      };

      var map = new google.maps.Map(document.getElementById(mapElementId), mapProp);
      google.maps.event.addDomListener(window, 'resize', function() {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(position);
      });
      var marker = new google.maps.Marker({
        position: position,
        title: address,
        flat: true,
        clickable: false
      });

      marker.setMap(map);
      setTimeout(function() {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(position);
      }, 100);
    } else {
      console.log('Geocode was not successful for the following reason: ' + status);
    }
  });
}

showMapWithAddress('googleMap', 'Josef-Bautz-Strasse 14, 63457 Hanau, Germany');

.cms-map-wrapper.circular {
  width: 50%;
  margin: auto;
  background-color: red;
}
.cms-map {
  border: solid 5px blue;
  border-radius: 100%;
  padding-bottom: 100%;
  margin-bottom: 20px;
}

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div class="cms-map-wrapper circular">
  <div id="googleMap" class="cms-map"></div>
</div>

Thanks ! I implemented that and it works as described ! However, I would like to re-center the map after every resize, and tried to register an event listener like this : `google.maps.event.addListener(map, 'resize', function() { map.setCenter(position); });` The listener works and does react, sadly the setCenter does not seem to have any effect in the listener — Jan, Dec 19 '14 at 18:36

Google Map not centering properly when in a scaling circle

1 Answers1