Google Maps v3 部分加载在左上角，调整大小事件不起作用
Posted
技术标签:
【中文标题】Google Maps v3 部分加载在左上角，调整大小事件不起作用【英文标题】：Google Maps v3 load partially on top left corner, resize event does not work 【发布时间】：2013-06-08 05:31:09 【问题描述】：Google Maps V3 部分加载在左上角。我尝试了以下方法：
地图初始化后添加google.maps.event.trigger(map, 'resize');。
重新排列索引文件中的<script>标签
但没有一个适合我。如何解决这个问题。这个问题有官方的bug和解决方案吗？
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from LayoutIt!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap css files -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet">
<link href="stylesheets/bootstrap-responsive.min.css" rel="stylesheet">
<link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<div id="contentbar">
<div id="dashboard-content" class="contentbar-main">
Some Content
</div>
<div id="summary-content" class="contentbar-main" style="display:none;">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span7" id="sidebarid">
<p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
</div>
<div class="span5" id="contentbarid">
<div class="row-fluid">
<div class="span12">
<input type="button" value="toggle" id="toggle-button">
<div id="map-canvas" style="width:100%;height:400px;"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<p>Responsive web design is an approach, I often call it a mindset, because you have to change the way you think when you're going responsive. The basic idea behind it is: one design to rule them all - no m.domain.com, no touch.domain.com, no 3 separate CSS files, no 7 PSD files for each device or each orientation - just “domain.com” looking the same on desktop, tablet and phone.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery scripts -->
<script type="text/javascript" src="javascripts/jquery.min.js"></script>
<!-- Bootstrap script -->
<script type="text/javascript" src="javascripts/bootstrap.min.js"></script>
<!-- My basic script file-->
<script type="text/javascript" src="javascripts/my-script.js"></script>
<!--Google Map server url-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAngjBDpe4ep15u5dvlnbZbn1ghA5uISZY&sensor=false"></script>
</body>
</html>
my-script.js
var map;
$(document).ready(function()
google.maps.visualRefresh = true;
initializeMap();
);
//Load Map in Summary Tab
function initializeMap()
var mapOptions =
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
google.maps.event.trigger(map, 'resize');
【问题讨论】：
正确的缩进显示，您缺少一个结束</div> 标记。
Google Maps Not Working in jQuery Tabs的可能重复
请问你能用最终的解决方案更新代码吗？我遇到了同样的问题，没有什么对我有用。非常感谢
【参考方案1】：
使用显示格式的 pageshow 事件。它对我有用。
$(document).on('pageshow', '[data-role="page"]#mapPage' , function() 初始化（）; );
【讨论】：
【参考方案2】：我遇到了所有地图的问题，除了第一个加载的地图显示在左上角，其余地图尚未加载，因此显示为灰色。
一直在摸不着头脑，但设法解决了：
google.maps.event.addListenerOnce(map, 'idle', function()
google.maps.event.trigger(map, 'resize');
map.setCenter(latLng);
);
感谢 Ian Devlin 和 d.raev，这是一个简单的解决方案，我只想说声谢谢并分享为我解决问题的代码，因为我还不能评论或投票！
我在创建地图后调用了：
map = new google.maps.Map(document.getElementById("business-location-"+business_username), map_options);
所以，如果您遇到此问题，请将其放在您创建 地图 的位置！
【讨论】：
除此之外，上面的所有解决方案都对我不起作用。谢谢大佬！【参考方案3】：我知道这是一个比较老的问题，但是我今天遇到了这个问题并找到了解决方案。它可能（可能没有）对人们有帮助，但是如果您需要在点击时显示 Google 地图，那么如果您在此事件中调用 initilise() 函数并延迟它从我下面的代码中可以看出。
Google Maps API 函数 - initialise()；
var locationLondon = new google.maps.LatLng(51.508742, -0.120850);
var map;
function initialise(location)
//Object to define properties
var mapProp =
center: locationLondon,
zoom: 15,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
//Map Marker
var marker = new google.maps.Marker(
position: locationLondon,
map: map
);
marker.setMap(map);
;
我的 jQuery 事件调用
$( document ).ready(function()
$( '#maps-container' ).hide();
$( '#card-1 .fa-info-circle' ).click(function(event)
event.stopPropagation();
$( '#maps-container' ).delay( 1000 ).fadeIn( 'slow' );
$( '#map-load' ).delay( 1000 ).fadeOut( 'slow' );
setTimeout(initialise, 1000);
);
);
【讨论】：
【参考方案4】：我刚遇到一个类似的问题（地图加载到用动画展开的容器中）
作为解决方案的一部分，@Ian Devlin 是在所有可见之后触发resize 事件。
第二部分是固定中心（因为它通常在左上角）：
google.maps.event.addListenerOnce(map, 'idle', function()
google.maps.event.trigger(map, 'resize');
map.setCenter(center); // var center = new google.maps.LatLng(50,3,10.9);
);
【讨论】：
这是唯一适合我的解决方案（无形模式中的谷歌地图）【参考方案5】：Google 地图不能很好地与 Bootstrap 配合使用。尝试将以下 CSS 添加到您的地图元素中
#map-canvas img
max-width: none;
Twitter Bootstrap CSS affecting Google Maps
【讨论】：
将 CSS 选择器更改为“#map-canvas img”。 不，它不起作用。正如 Michael Geary 先生所说，地图加载时我的 div 不可见。当我的 div 可见时，我尝试触发调整大小事件。但它也不起作用。 此代码有效。您必须更改 css 选择器以匹配您的代码。【参考方案6】：我以前也遇到过这个问题，并通过等待地图的“空闲”状态（即完成时）然后调用调整大小来修复它：
google.maps.event.addListenerOnce(map, 'idle', function()
google.maps.event.trigger(map, 'resize');
);
【讨论】：
这不是一回事，因为当 jQuery 决定地图准备就绪时调用你的 initializeMap() 函数，而不是地图 API 本身。 这是唯一对我有用的解决方案。我遇到了同样的问题，甚至尝试手动触发调整大小，就像由视口调整大小触发的google.maps.event.trigger(map, 'resize'); 一样。不幸的是，这并没有解决问题；只有上面的解决方案解决了它。
感谢它帮助我，我正在使用 Google Maps API V3
非常感谢您！ +1
@IanDevlin 我整天都在为此苦苦挣扎，直到我找到了这个。谢谢！！我很好奇您能否简要解释为什么有时需要这样做。过去我在没有事件监听器的情况下多次使用它没有问题，所以我想更好地理解。【参考方案7】：
我认为您的地图在创建时是隐藏的：#summary-content div 上有一个 display:none，地图嵌套在其中。
您应该尝试触发resize 事件在 div 可见而不是在初始化期间。
事实上，您可能只是在 div 可见时调用您的 initializeMap() 函数事件，而不是在您的 .ready() 函数中调用它。
【讨论】：
是的，起初我的#summary-content div 是不可见的，点击导航项后，#summary-content 将可见。我在#summary-content 的onclick 事件中添加了resize 事件。它工作正常。但我不需要每次在页面之间导航时加载地图。 谢谢 - 这正是我的问题...！ 这也解决了我的问题。 在使元素可见时初始化地图对我有用。谢谢。以上是关于Google Maps v3 部分加载在左上角，调整大小事件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
Google Maps v3 - 防止 API 加载 Roboto 字体
地图加载后 Google Maps API v3 不会禁用滚轮
如何使用 Google Maps Javascript API V3 在加载时设置 infoWindow 内容
在 google maps api v3 中独立与 geojson 图层交互