Javascript 谷歌地图与谷歌MDL标签问题

我正在尝试在一个选项卡中实现谷歌地图视图。我正在使用谷歌的Material Design Lite框架制作标签。 我有几个问题，为此我咨询了以下问题。两者都没有提供完美的解决方案，但它们确实部分解决了我的问题

然而，一些烦人的错误依然存在

第一个问题涉及贴图本身的渲染。我只在左上角有一张常见的地图。我重新排列了javascript代码，如下所示：

$（函数（）{
$（'.map选项卡'）。单击（函数（）{
初始化（）；
})
});
函数初始化（）{
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新google.maps.LatLng（44.5403，-78.5463），
缩放：5，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（mapCanvas，mapOptions）；
}

正文{
字体系列：无衬线；
背景：#eee；
}
A.
h1，
氢{
颜色：#377ba8；
文字装饰：无；
}
h1，
氢{
字体系列：“乔治亚”，衬线；
保证金：0；
}
h1{
边框底部：2倍实心#eee；
}
氢{
字体大小：1.2米；
}
字段集{
/*浮动：左*/
明确：两者皆有；
宽度：100%；
利润率：0.0-1米0；
填充：0.01米0；
边框样式：无；
边框顶部：1px实心#BFBAB0；
/*背景色：#F2EFE9*/
}
传奇{
左边距：1米；
颜色：#000000；
字体大小：粗体；
}
图例跨度{
/*位置：绝对位置*/
/*边缘顶部：0.5em*/
/*字体大小：135%*/
}
字段集{
填充：0.2em；
列表样式：无；
}
保险商实验室{
填充：0 1em 0 1em；
列表样式：无；
}
田野组李分区{
浮动：左；
清除：左；
宽度：100%；
垫底：1米；
}
fieldset.submit{
浮动：无；
宽度：自动；
边框：0无#FFF；
左：12em；
}
标签{
浮动：左；
宽度：10em；
右边距：1米；
文本对齐：右对齐；
}
img{
最大宽度：100%；
最大高度：100%；
高度：自动；
宽度：自动\9；
/*ie8*/
}
运输署{
边界：1px；
}
.第页{
利润率：2米自动；
宽度：65em；
/*边框：5px实心#ccc*/
/*填充：0.8em*/
背景：白色；
}
.mdl-layout\u内容{
背景：白色；
}
.参赛作品{
列表样式：无；
保证金：0；
填充：0；
}
李先生{
边缘：0.8em 1.2em；
}
.li h2{
左边距：-1米；
}
.添加条目{
字号：0.9em；
边框底部：1px实心#ccc；
}
.添加条目dl{
字体大小：粗体；
}
梅塔纳夫先生{
/*文本对齐：右；字体大小：0.8em*/
填充：0.3em；
边缘底部：1米；
背景：#fafafa；
}
.闪光{
背景：#cee5F5；
填充：0.5em；
边框：1px实心#aacbe2；
}
.错误{
背景：#f0d6d6；
填充：0.5em；
}

#地图{
宽度：自动；
/*500px*/
高度：400px；
溢出：隐藏；
最大宽度：无；
/*背景色：#CCC*/
}
#映射img{
最大宽度：无；
}

您的问题是

您将此css应用于img，这会破坏控件：

您需要覆盖最大宽度和最大高度

#map img {
    max-width: none !important;
    max-height: none !important;
}

显示选项卡后，需要触发“地图调整大小”事件

#map img {
    max-width: none !important;
    max-height: none !important;
}