如何在宽度可变的div中居中/对齐Google地图 [英] How to center/align Google Maps in a div with a variable width

问题描述

我已经将Google地图加载到页面宽度为100％的div中（通过API）。
叠加层位于中心，地图应该像这样定位。
问题是地图现在对齐左边。

我可以使用与页面宽度相对应的LatLng移动中心，但这似乎是很多工作都是为了一个简单的任务。我一直在浏览API参考，但无法找到解决方案。

Maps API（v3）中是否有任何方法来定位/对齐地图在/到中心？

编辑：

当您调整浏览器窗口在这个例子中：

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

地图与窗口的顶部对齐。

我想要的是当调整大小时，地图的中心停留在窗口的中心位置。

因此，如果窗口宽200px，地图会向右移100px。

解决方案

有两个 div ，一个在另一个里面，你甚至可以使用百分比来居中内部。

并附加一个事件处理程序在每个 resize 事件中重新映射地图。

$ b HTML p>

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

JS
< pre $ $（window）.on（'resize'，function（）{
var currCenter = map.getCenter（）;
google.maps.event.trigger （map，'resize'）;
map.setCenter（currCenter）;
}）


CSS

  #outerdiv {width：90％;身高：90％;位置是：固定; text-align：center} 
 #map_go {width：70％;身高：100％; margin：0px auto;显示：内嵌块} 
  

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

经过测试firefox 15

I've got a Google Maps loaded in a div that is 100% the width of the page (via API). The overlay is positioned in the center and the map should be positioned like this to. The problem is the map is now aligned to the left.

I could move the center with LatLng corresponding to the width of the page, but this seems like a lot of work for a simple task. I've been looking through the API-reference but couldn't find a solution.

Is there any way in the Maps API (v3) to position/align the map in/to the center ?

Edit:

When you resize the browserwindow in this example:

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

The map is aligned to the topleft of the window.

What I want is the center of the map staying in the center of the window when resizing it.

So the map would move 100px to the right if the window got 200px wider.

解决方案

by having two div, one inside the other, you can center the inner one even using percentages.
and attach an event handler to re-center the map on each resize event.

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}

see it working here: http://jsfiddle.net/RASG/eXCFw/

tested with firefox 15

这篇关于如何在宽度可变的div中居中/对齐Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！