maps - 如何从嵌入式 map 引擎 iframe(谷歌地图)中删除控件

Question

有没有办法从嵌入式 mapsengine iframe 中删除大控制窗口？

假设我嵌入了 map 引擎的 640x480 iframe，并且 1/4 的屏幕占用了 map 引擎图层控件。

<iframe src="http://mapsengine.google.com/map/view?mid=z-CXoJOwaOdI.k77h0_UeoKiw" width="640" height="480"></iframe>

Answer 1

super 简单的解决方案

将宽度设置为 517 像素 或更小。控制面板将消失...在桌面上。它会神奇地出现在手机上。

稍微复杂一点的解决方案

CSS

<style>
#mapsengine-box-outer {overflow: hidden;}
#mapsengine-box-inner {
    overflow: hidden;
    width:590px;
    height:590px;
    border:5px solid #998;
    border-radius:10px;
    }
#mapsengine {margin: -30px 0 0 -350px;}
</style>

HTML

<div id="mapsengine-box-outer">
    <div id="mapsengine-box-inner">
        <iframe id="mapsengine" width="1285" height="630"
        src="https://mapsengine.google.com/map/embed?mid=*******">
        </iframe>
     </div>
</div>

我在我的网站上放了一个关于这个的页面(包括一个移动解决方案)Maps Engine Manipulation – Removing iframe Controls (featureListPanel)这是一个CodePen一起玩。