谷歌地图API浏览器检查元素的作品 [英] Google maps api works with browser inspect element

问题描述

这张地图是一辆满载灰色的小马车，我们一直在努力尝试修复google map canves插件到我的应用程序中使用twitter bootstrap。补丁，而且它永远不是中心。但我最近注意到的是，一旦我在包含该插件的页面上单击检查元素，一切都正常，地图工作正常。

这看起来很奇怪，但这是我注意到的。 Anyideas是什么问题以及如何解决它。

注意：我在Chrome和Firefox浏览器上测试过它。

代码

触发模式的页面： http：// pastie。 org / 4594166
模态html： http://pastie.org/4594195
gmaps：< script src ='http：//pastie.org/4595877.js'>< / script>

解决方案

我猜你的地图并未默认显示，但代码会有帮助。听起来你需要在地图显示时触发调整大小。请参阅地图对象事件下的调整大小：

https://developers.google.com/maps/documentation/javascript/reference#Map

[已添加此脚本以进行工作]

$ b $

  $（document）.ready（function（）{
 $（'＃mymodal'）。on（'显示'，function（）{
 google.maps.event.trigger（map，'resize'）; 
}）; 
}）; 
  

I've been struggling several day to try to fix google map canves plugin to in my app which uses twitter bootstrap.

The map is to buggy full of grey patches, and it's never well center. but what I lately notice d is that once I click "inspect element" on the page containing the plugin, everything is normal and the map works fine.

This might seem weird, but that is what I noticed. Anyideas what is the problem and how to fix it.

Note: I tested it on chrome and firefox browser.

Code

page triggering the modal : http://pastie.org/4594166 the modal html: http://pastie.org/4594195 gmaps: <script src='http://pastie.org/4595877.js'></script>

解决方案

I'm guessing your map is not shown by default, but code would be helpful. It sounds like you need to trigger resize when the map is shown. See resize under Events for the Map object:

https://developers.google.com/maps/documentation/javascript/reference#Map

[Added this script to work]

$(document).ready(function () { 
  $('#mymodal').on('shown', function () { 
    google.maps.event.trigger(map, 'resize');  
  });   
});

这篇关于谷歌地图API浏览器检查元素的作品的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！