2013-11-25 21 views
0

我一直在尋找正確的答案,但我找不到它。使我的谷歌地圖響應的寬度

我有一個谷歌地圖API,當我使瀏覽器寬度變大時,我試圖獲得響應。

在我的javascript我有這樣的代碼跟我的HTML DIV交互

ui.map = new google.maps.Map(document.getElementById("map_canvas"), mapParams); 
    ui.bounds = new google.maps.LatLngBounds(); 

    google.maps.event.addDomListener(window, 'resize', function() { 
map.setCenter(homeLatlng); 

我的HTML:

<div id="map_canvas" class="map"></div> 

我的CSS響應代碼:

@media screen and (min-width: 800px) { 
#map_canvas { 
margin:0 auto; height:600px; min-width:450px; max-width:750px; float:right; 

的問題是,我的谷歌地圖保持在450px .. 有誰知道爲什麼我的谷歌地圖不成爲當我讓瀏覽器的寬度變大時更大一些?

+0

#map_canvas中有許多div。檢查以確保這些div的寬度爲100%。 – brouxhaha

+0

你的答案在於以下鏈接:http://stackoverflow.com/questions/11598955/resizing-google-map-according-to-browser-resizing – RouteMapper

+0

你是如何嵌入地圖? –

回答

0

您需要在css中將width#map_canvas設置爲100%。這樣它就會拉伸父容器的寬度。如果在調整瀏覽器大小時達到了這些限制,它仍然會服從min-widthmax-width屬性。