Using the following barebones code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="map_area" style="width:100%;padding-bottom:100%;"></div>
<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=AIzaSyCfoIZz72NPrAPegHrWxqZtvzGkTASDXMc&sensor=false'></script>
<script type="text/javascript">
var center = new google.maps.LatLng(38.504806, -122.470542);
var mapOptions = {
center: center,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_area"), mapOptions);
</script>
</body>
</html>
Example available at http://test.wcwddemo.com.
At larger (e.g. desktop) viewport sizes, it works as expected, centering a map on the small California town of St. Helena.
If you shrink the size of the viewport and refresh the screen, at some point (around a width of 625px), the map is no longer centered on the town. Instead, the town seems to be centered on the lower boundary of the map container.
On the surface, this appears to be a bug. Am I missing something? Is there a workaround?
You must set a height-style for map_area.
From the docs: you must always set a size on that
<div>explicitly