如何在具有可变宽度的div中居中/对齐Google地图

Question

我有一个加载在div中的Google Maps,其宽度为页面宽度的100%(通过API).叠加层位于中心,地图应如下所示.问题是地图现在与左边对齐.

我可以使用与页面宽度相对应的LatLng移动中心,但这对于简单的任务来说似乎很多工作.我一直在寻找API参考但无法找到解决方案.

Maps API(v3)中是否有任何方法可以将地图定位/对齐到中心？

编辑:

在此示例中调整浏览器窗口的大小时:

http://econym.org.uk/gmap/example_fullscreen1.htm

地图与窗口的topleft对齐.

我想要的是在调整大小时,地图的中心停留在窗口的中心.

因此,如果窗口宽200px,地图将向右移动100px.

Answer 1

通过两个div,一个在另一个内,你甚至可以使用百分比来居中.
并附加一个事件处理程序,以便在每个resize事件上重新定位地图.

HTML

<div id="outerdiv">
    <div id="map_go" />
</div>

JS

$(window).on('resize', function() {
    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
})

CSS

#outerdiv {width: 90%; height: 90%; position:fixed; text-align:center}
#map_go {width: 70%; height: 100%; margin:0px auto; display:inline-block}

看到它在这里工作:http://jsfiddle.net/RASG/eXCFw/

用firefox测试15

Answer 2

我尝试了这个,它对我来说很好

#map-canvas { height: 70%; width :50%; margin-left:auto; margin-right:auto;}