谷歌地图v3显示Jquery和Bootstrap错误的地图（Rails 4）
我有一个Rails 4应用程序，我正在使用Bootstrap。 我想显示一张Google Maps v3地图。 我成功了，但现在我想在div容器中显示这个地图，这个容器最初是隐藏的，位于Bootstrap行内，并且跨越div。 因此，当用户点击“显示地图”按钮时，将显示包含内部地图的div。
我可以在用户单击按钮时显示div，但地图未正确显示。 我只能在div的左上角看到200px左右的小方块地图，div的其余部分是灰色的。 控件也显示错误。
我看到有很多条目存在这个问题，但是，到目前为止我无法修复它。
我不确定问题是否是因为bootstrap（我看到一个post，他们说你必须覆盖一些img样式。我已经做过了）或者问题是否与调整地图大小有关。 但事实是我无法正确显示它。
请帮忙。
我的代码：
Rails查看：
- Latitude:
- Longitude:
- Address:
使用Javascript：
// Shows and hide info, rating and maps divs. $(document).ready(function(){ $(".show-on-hover").hide(); $(".sliding-map").hide(); $('.show_map').click(function() { $(".sliding-map").slideToggle(); }); var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); });
和CSS：
html, body, #map-canvas { margin: 0; padding: 0; } .map_container { padding: 6px; border-width: 1px; border-style: solid; border-color: #ccc #ccc #999 #ccc; -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px; box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px; } .map_container img{max-width: none;}
我修好了！
只需要添加
google.maps.event.trigger(map, 'resize');
显示div的函数，如下所示：
$('.show_map').click(function() { $(".sliding-map").slideToggle(); google.maps.event.trigger(map, 'resize'); });