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

【问题标题】：How to center/align Google Maps in a div with a variable width如何在具有可变宽度的 div 中居中/对齐 Google 地图
【发布时间】：2012-10-23 15:39:18
【问题描述】：

我在一个 100% 页面宽度的 div 中加载了 Google 地图（通过 API）。叠加层位于中心，地图应像这样定位。问题是地图现在向左对齐。

我可以使用与页面宽度相对应的 LatLng 来移动中心，但这对于一项简单的任务来说似乎需要做很多工作。我一直在查看 API 参考，但找不到解决方案。

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

编辑：

当您在本例中调整浏览器窗口大小时：

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

地图与窗口的左上角对齐。

我想要的是地图的中心在调整大小时保持在窗口的中心。

因此，如果窗口宽 200 像素，地图将向右移动 100 像素。

【问题讨论】：

标签： google-maps-api-3

【解决方案1】：

通过有两个div，一个在另一个内部，即使使用百分比，您也可以将内部的一个居中。
并附加一个事件处理程序以在每个 resize 事件上重新居中地图。

HTML

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

$(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 测试

【讨论】：

正是我需要的！谢谢！我不需要外部 div，这是为了跨浏览器改进吗？我猜这个小提琴对我来说已经足够了：jsfiddle.net/eXCFw/3

【解决方案2】：

我试过了，效果很好

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

【讨论】：

内联：margin-left:auto;边距右：自动；完美！

【解决方案3】：

这应该会有所帮助： http://econym.org.uk/gmap/basic19.htm

它描述了百分比大小的 div 和地图（需要知道地图的渲染大小）的问题。它来自 Mike Williams 的 Google Maps API v2 教程，但这个概念也适用于 v3。

【讨论】：

这不是我的意思，但我可以用它作为我的问题的一个很好的例子。当您在该示例中调整浏览器窗口的大小 (econym.org.uk/gmap/example_fullscreen1.htm) 时，地图将与窗口的左上角对齐。我想要的是地图的中心在调整大小时保持在窗口的中心。因此，如果窗口宽 200 像素，地图将向右移动 100 像素。
@Tim 尝试添加padding 或更改width 值

【解决方案4】：

我不明白你为什么需要 2 个 DIV 来实现这一点。

一个 DIV 就足够了：

$(window).resize(function() {

    var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
});

请查看http://jsfiddle.net/RGUnd/2/

【讨论】：