我正在使用新的 Google 地图嵌入代码 (iFrame) 将小地图添加到我的网站,但我无法隐藏左上角的新地址框(见下图)。
我通过单击“共享和嵌入地图”选项(见下图)生成了地图代码,但我想知道是否需要使用完整的 API 来实现这一点。
到目前为止我找到的所有资源都只是讨论旧的嵌入版本和禁用不一样的信息气球,我得到的唯一线索是盒子的 HTML 类被称为“place-card”但搜索仍然没有给我带来任何东西。
任何帮助或指向正确方向将不胜感激。
我正在使用新的 Google 地图嵌入代码 (iFrame) 将小地图添加到我的网站,但我无法隐藏左上角的新地址框(见下图)。
我通过单击“共享和嵌入地图”选项(见下图)生成了地图代码,但我想知道是否需要使用完整的 API 来实现这一点。
到目前为止我找到的所有资源都只是讨论旧的嵌入版本和禁用不一样的信息气球,我得到的唯一线索是盒子的 HTML 类被称为“place-card”但搜索仍然没有给我带来任何东西。
任何帮助或指向正确方向将不胜感激。
您可以使用 css 隐藏所有按钮。在隐藏和您需要的大小上创建一个容器 div 宽度溢出。将新的 google maps iframe/embed 放入更大尺寸的内部。要定位地图 iframe,请使用负边距..
100% 宽度的示例:
<div style="width: 100%; overflow: hidden; height: 300px;">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39797.07748547086!2d5.46683904751879!3d51.433965676849986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6d90575ca5e3d%3A0x55989f5f344b006!2sPrins+Hendrikstraat+5!5e0!3m2!1snl!2snl!4v1392716144537"
width="100%"
height="600"
frameborder="0"
style="border:0; margin-top: -150px;">
</iframe>
</div>
使 iframe 比您的容器 div 高 300 像素。150px 隐藏在下面,150px 隐藏在上面。要将这 150 隐藏在 iframe 的顶部,请使用:
边距顶部:-150px;
你可以试试这个:
您的 iframe 将是这样的:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333.967410377096!2d-111.89998968453055!3d33.31966746342457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDE5JzEwLjgiTiAxMTHCsDUzJzUyLjEiVw!5e0!3m2!1sen!2sus!4v1516690469899" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
您可以删除位置卡和地图控件(地图类型和缩放图标)
<div style="width: 100%; overflow: hidden; height: 350px;">
<iframe width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" src="https://maps.google.com/maps?f=l&source=s_q&hl=en&geocode=&q=Walt+Disney+World+Resort&aq=t&sll=28.38545007745952, -81.56377744291994&ie=UTF8&ll=28.38545007745952, -81.56377744291994&z=17&om=0&iwloc=addr&iwd=0&layer=0&output=embed"></iframe></small>
</div>
注意:您可以根据需要添加/删除参数
https://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters