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

Question

我正在开发一个应用程序，其中包含google maps. script如下。

<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>

而且div是

它没有正确调整大小，但是一旦您单击检查元素，它就会调整大小。请帮我找出解决方案。作品更受赞赏

Answer 1

在这一行

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>

Answer 2

<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>