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

Question

我的谷歌地圖的寬度和高度非常小。 我需要 400 像素的寬度和高度。 但我得到了 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>

Answer 1

AFAIK google 的map_canvas div 不支持以%為pixels height和width ，您只需要以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" 。 這樣它就會在屏幕上顯示地圖。

看到這個，以了解谷歌地圖的高度/寬度問題。

這是文檔