【问题标题】:Google Maps Embed - Remove Place Card谷歌地图嵌入 - 删除地点卡
【发布时间】:2021-02-23 04:54:41
【问题描述】:

我正在使用新的 Google 地图嵌入代码 (iFrame) 将小地图添加到我的网站,但我无法隐藏左上角的新地址框(见下图)。

我通过单击“共享和嵌入地图”选项生成了地图代码(见下图),但我想知道是否需要使用完整的 API 来实现这一点。

到目前为止我找到的所有资源都只是讨论旧的嵌入版本和禁用不一样的信息气球,我得到的唯一线索是盒子的 HTML 类被称为“地方-card”,但搜索仍然没有给我带来任何东西。

任何帮助或指出正确的方向将不胜感激。

【问题讨论】:

标签: google-maps iframe hide google-maps-embed


【解决方案1】:

您可以使用 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;

【讨论】:

  • 看起来很老套,但也很聪明。 +1
  • 您认为这是否会被视为违反 google 条款?我问这个是因为如果你做同样的事情来隐藏底部的版权行,你可能会遇到麻烦。
  • 这不是我问的,我只是想知道隐藏 顶部的按钮是否不能像隐藏版权行时那样被视为侵权.
  • 问题在于它还隐藏了缩放控件
  • @BoPennings 否。在考虑像素大小和缩放级别的情况下进行经度和纬度地图调整充其量是噩梦。根本不是一个有效的解决方案。
【解决方案2】:

您可以删除位置卡和地图控件(地图类型和缩放图标)

<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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Walt+Disney+World+Resort&amp;aq=t&amp;sll=28.38545007745952, -81.56377744291994&amp;ie=UTF8&amp;ll=28.38545007745952, -81.56377744291994&amp;z=17&amp;om=0&amp;iwloc=addr&amp;iwd=0&amp;layer=0&amp;output=embed"></iframe></small>
    </div>

注意:您可以根据需要添加/删除参数

https://moz.com/ugc/everything-you-never-wanted-to-know-about-google-maps-parameters

【讨论】:

    【解决方案3】:

    你可以试试这个:

    1. 转到https://www.maps.ie/coordinates.html 获取您的坐标
    2. 转到 Google 地图并输入这些坐标(逗号分隔如下:33.319663、-111.89780100000002)
    3. 点击分享(位于左侧)
    4. 点击嵌入地图
    5. 配置您想要的地图大小
    6. 复制html

    您的 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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-02-20
      • 2016-10-27
      • 2012-10-31
      • 2023-03-31
      • 1970-01-01
      • 2014-06-08
      • 2012-10-17
      • 1970-01-01
      相关资源
      最近更新 更多