jquery - 谷歌地图调整大小不起作用

Question

我试图显示一个带有slideToggle 效果的谷歌地图，但地图没有完全显示。

css 类已经有 100% 的宽度。如何正确使用调整大小选项？

var map;
function initialize() {
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(<?php $custom = $this->item->extra_fields; echo $custom[0]->value; ?>, <?php $custom = $this->item->extra_fields; echo $custom[1]->value; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP

  };
  map = new google.maps.Map(document.getElementById('map-canvas<?php echo $this->item->id; ?>'),
      mapOptions);

  }

google.maps.event.addDomListener(window, 'load', initialize);

jQuery(document).ready(function ($) {
    $('#mostrarmapa<?php echo $this->item->id; ?>').click(function () {

        $('#map-canvas<?php echo $this->item->id; ?>').slideToggle();
        $('#map-canvas<?php echo $this->item->id; ?>').addClass('showmap');
    });
});

google.maps.event.trigger(map, 'resize');

Answer 1

在你的回调函数中添加resize你地图的触发事件slideToggle。

$('#map-canvas<?php echo $this->item->id; ?>').slideToggle(function(){
    google.maps.event.trigger(map, 'resize');
});