How to remove controls from embedded mapsengine iframe (google maps) -
is there way remove big control window embedded mapsengine iframe?
lets im embedding 640x480 iframe of mapsengine , 1/4 of screen takes mapsengine layer controls.
<iframe src="http://mapsengine.google.com/map/view?mid=z-cxojowaodi.k77h0_ueokiw" width="640" height="480"></iframe>
super simple solution
set width @ 517px or smaller. control panel disappear ... on desktop. magically appear on mobile.
slightly more complicated solution
the 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>
the 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>
i put page (including mobile solution) on site maps engine manipulation – removing iframe controls (featurelistpanel) , here's codepen play with.
Comments
Post a Comment