如何在可變寬度的div中居中對齊Google地圖

我已經將Google地圖加載到頁面寬度爲100％（通過API）的div中。疊加層位於中心，地圖應該像這樣定位。問題是地圖現在對齊到左側。如何在可變寬度的div中居中對齊Google地圖

我可以用latLng來移動頁面的寬度，但是這對於一個簡單的任務看起來像很多工作。我一直在瀏覽API參考，但找不到解決方案。

在地圖API（v3）中是否有任何方法將地圖放入/對齊中心？

編輯：

當調整在這個例子中，browserwindow：

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

地圖對準窗口的左上。

我想要的是調整大小時停留在窗口中心的地圖中心。

因此，如果窗口寬200px，地圖會向右移100px。

來源

2012-10-23 Tim Baas

通過有兩個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

來源

2012-10-23 18:33:31 RASG

正是我需要的！謝謝！我不需要外部div，這是爲了跨瀏覽器的改進？這個小提琴對我來說已經足夠了我想：http://jsfiddle.net/eXCFw/3/ –

@Tim：你的例子可以正常工作:) – RASG

這應有助於： http://econym.org.uk/gmap/basic19.htm

它描述了百分比大小的div和地圖（這需要知道地圖的呈現大小）的問題。它來自Mike Williams的Google Maps API v2教程，但該概念也適用於v3。

來源

2012-10-23 17:35:15 geocodezip

這不是真的我的意思，但我可以用它作爲我的問題的一個很好的例子。當您在該示例中調整瀏覽器窗口大小時（http://econym.org.uk/gmap/example_fullscreen1.htm），地圖將與窗口的頂部對齊。我想要的是當調整大小時，地圖的中心停留在窗口的中央。所以如果窗口寬200px，地圖會移動100px。 –

@Tim嘗試添加「padding」或更改「width」的值 – Danger14

測試，我不明白你爲什麼會需要2倍的DIV來實現這一目標。

一個DIV是不夠的：

$(window).resize(function() { 

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

請檢查http://jsfiddle.net/RGUnd/2/

來源

2012-10-24 10:23:13 MrUpsidown

我想這和它的工作對我罰款

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

來源

2014-05-12 20:41:20 tuhame

即使在線：margin-left：auto;保證金右：自動;完美的作品！ – mrki

如何在可變寬度的div中居中對齊Google地圖

回答

相關問題