javascript - 浏览器大小更改后出现 Google map

Question

问题是，当我使用下面的代码时，其中也包含客户端 key 第一个输入页面显示空的谷歌地图，如果我稍微调整浏览器的大小， map 就会出现。

我不知道哪里出了问题...请提供任何帮助。

$(document).on("pagecreate", function (event) { 
			    initMap();
        });

		function initMap()
		{ 
                var map_options = {
				center: new google.maps.LatLng(-16.5112321,-68.1224865),
				zoom: 20,
				mapTypeId: google.maps.MapTypeId.ROADMAP
		        }

			  map_canvas = document.getElementById('googleMap');
			  var map = new google.maps.Map(map_canvas, map_options);
		}

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap" style="width:100%;height:400px;"></div>

Answer 1

我使用过 jQuery mobile 的 TABS，所以解决方案是初始化 map ，然后 TAB 处于事件状态。答案 #55 在这里找到 https://issuetracker.google.com/issues/35818323

   $( "#tabs" ).on( "tabsactivate", function( event, ui ) {
                initMap();
    } );