更改浏览器大小后显示Google地图 [英] Google map appears after browser size changes
本文介绍了更改浏览器大小后显示Google地图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问题是,当我使用以下包含客户端密钥的代码时, 拳头进入页面显示空的Google地图,如果我调整浏览器大小,地图就会出现.
The problem is that when I use code below that includes client key as well at the fist enter pages shows empty google map and if I resize a little bit browser the map appears.
我不知道出什么问题了... 请帮忙.
I cannot figure out what is wrong... Any help please.
$(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>
推荐答案
我使用了jQuery mobile的TABS,因此解决方案是先初始化映射,然后TAB处于活动状态. 在此处找到答案#55 https://issuetracker.google.com/issues/35818323
I have used TABS of jQuery mobile so solution is to init map then TAB is active. The answer #55 was found here https://issuetracker.google.com/issues/35818323
$( "#tabs" ).on( "tabsactivate", function( event, ui ) {
initMap();
} );
这篇关于更改浏览器大小后显示Google地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文