Jquery 谷歌地图没有正确调整大小

我正在开发一个应用程序，其中包括

谷歌地图

。

脚本

如下所示

<script>https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false</script>
<script>
   $(function() {
     var map;

     function initialize() {

        var mapOptions = {
              zoom: 8,
              center: new google.maps.LatLng(13.004558, 77.6017),
              mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'),
               mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        google.maps.event.trigger(map, "resize");

     });

</script>

https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false
$（函数（）{
var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（13.004558,77.6017），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
google.maps.event.trigger（map，“resize”）；
});

而

div

是

它无法正确调整大小，但一旦单击inspect元素，它就会调整大小。请帮我找出解决办法。这项工作在这方面更受欢迎

var map = new google.maps.Map(document.getElementById('map-canvas'),
           mapOptions);

您不需要“var”

包括jquery吗

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

试着这样做

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

$（文档）.ready（函数（）{
var映射；
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（13.004558,77.6017），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=新建google.maps.map(
document.getElementById（'map-canvas'），
地图选项）；
$（“#地图画布”）.css（“高度”，“120px”）；
google.maps.event.trigger（map，“resize”）；
});

你想用resize做什么？它不是根据div的大小调整大小。所以有人建议我加入google.maps.event.trigger（map，“resize”）；。但它仍然不起作用。这听起来是个问题，当标签点击（打开）时，你应该调用map.checkResize（），当你初始化gmap时，标签是不可见的，我认为它的大小实际上没有正确地调整google.maps.event.trigger（map，'resize'）；很好，在选项卡可见后调用它这应该可以工作，请注意，您必须设置要渲染贴图的div的高度和宽度，然后调用resize函数

<script src ="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<script>
$(document).ready(function(){
var map;
var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(13.004558, 77.6017),
      mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(
        document.getElementById('map-canvas'),
       mapOptions);

$("#map-canvas").css("height", "120px");
google.maps.event.trigger(map, "resize");
});

</script>
<div id = "map-canvas"></div>