我如何調整谷歌地圖的寬度和高度

我的谷歌地圖的寬度和高度非常小。我需要400px的寬度和高度。但我得到256px。 map_canvas div具有400px的寬度和高度。如何更改Google地圖的寬度和高度。請幫幫我。我如何調整谷歌地圖的寬度和高度

<form id="overlay_form" style="display:none" style="width:500px;height:500px;"> 
    <img src="<?php echo base_url();?>img/x.png" id="close"/> 
    <div id="map_canvas" style="width:100%; height:100%;"></div> 
</form> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".popup").click(function(){ 
     $("#overlay_form").fadeIn(1000); 
     positionPopup(); 
    }); 

    $("#close").click(function(){ 
     $("#overlay_form").fadeOut(1000); 
    }); 
}); 

    function positionPopup(){ 
    if(!$("#overlay_form").is(':visible')){ 
     return; 
     } 
     $("#overlay_form").css({ 
      left: ($(window).width() - $('#overlay_form').width())/2, 
      top: ($(window).width() - $('#overlay_form').width())/7, 
      position:'absolute' 
     }); 
    } 

    $(window).bind('resize',positionPopup); 

</script>

來源

2014-05-06 user3595293

不能更改'map_canvas' CSS？ AFAIK你可以在css中爲map_canvas設置高度和寬度。 –

Google地圖在彈出窗口中顯示，其寬度和高度爲500px; – user3595293

請張貼該彈出窗口的代碼以及您如何與CSS一起顯示。 –

據我所知谷歌的map_canvas DIV不支持%height和width，you'l需要在只有pixels明確地指定。因此，改變你的代碼如下：

<form id="overlay_form" style="width:500px;height:500px;"> 
    <img src="<?php echo base_url();?>img/x.png" id="close"/> 
    <div id="map_canvas" style="width:500px; height:500px;"></div> 
</form>

我也從<form ..>刪除style="display:none"。這樣它會在屏幕上顯示地圖。

看到這，瞭解issue of height/width in % for google map.

這裏是documentation

來源

2014-05-06 07:07:16

但沒有change.Here是彈出我的代碼彈出 – user3595293

而不是粘貼代碼在評論中。請編輯您的問題，並添加到這裏。在這裏評論其非常難以閱讀的代碼。 –

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async。解決了問題。 – user3595293

我如何調整谷歌地圖的寬度和高度

回答

相關問題