将CSS应用于谷歌地图iframe

Question

我试图将css应用于谷歌地图iframe，以摆脱那个丑陋的横幅：

但是我找不到将样式表链接到iframe的方法..有没有办法做到这一点？

提前致谢！

Answer 1

尝试嵌入谷歌地图iframe而不是此代码，它可以帮助您根据需要设计代码，也不添加边框条。 如果它不起作用，请尝试在谷歌地图上创建具有相同地址的新位置，然后添加该iframe，它可以正常工作。

在文件中添加此jquery代码的另一种方法。

$(document).ready( function() {
    $('.name-of-class').css('display','none');
    // find the name of the class using inspect element and then replace
    // it with the class name it will work 100%
});

Answer 2

我也在寻找一种解决方案，以隐藏“ Google我的地图”的顶部横幅。在这里找到了解决方案：http://www.howtoonlinetips.com/hide-google-map-top-bar-embedded-header/

它可以很好地满足我的需求。只需用div包裹iframe并隐藏顶部即可。

<div style="height:400px; width:100%; display:inline-block; overflow:hidden;"> 
   <iframe class="custom-google-map" style="position:relative; top:-50px; border:none;" src="http://source-fo-the-map.com" width="What Ever Width" height="445" />
</div>

Answer 3

只需在底部添加一些填充，这样您就不会剪切地图，如下所示：

<div style="
        height: 400px;
        width: 100%;
        display: inline-block;
        overflow: hidden">

    <iframe
        style="
            position: relative;
            top: -50px;
            border: none;
            padding-bottom: 50px"
        
        src="yourSource"
        width="100%"
        height="480px"
    ></iframe>
</div>