谷歌地图嵌入-移除地点卡片

Question

谷歌地图嵌入-移除地点卡片

27

我正在使用新的Google地图嵌入代码（iFrame）将小地图添加到我的网站上，但是我无法隐藏左上角的新地址框（请参见下面的图片）。我通过单击“共享和嵌入地图”选项（请参见下面的图片）生成了地图代码，但我想知道是否需要使用完整的API才能实现这一点。到目前为止，我找到的所有资源都只讨论旧的嵌入版本和禁用信息气球，这与我的问题不同，并且我唯一的线索是该框的HTML类名为“place-card”，但搜索仍然没有结果。任何帮助或指向正确方向的指引都将不胜感激。

- Sintyche

这里有一个更全面的讨论：https://dev59.com/3Ggu5IYBdhLWcg3wbGel - harvest316

很晚了，但是有另外一种方法可以删除它。https://dev59.com/b2Eh5IYBdhLWcg3wVCAb#37083353 - rawnewdlz

太好了，谢谢。如果你在这里添加相同的答案，我会接受它作为正确答案。 - Sintyche

3个回答

1

您可以移除卡片和地图控件（地图类型和缩放图标）。

<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

- Zafar Ahmed

1

你可以尝试以下方法：

前往 https://www.maps.ie/coordinates.html 获取你的坐标
进入谷歌地图并输入这些坐标（用逗号分隔，如：33.319663，-111.89780100000002）
点击“分享”（位于左侧）
点击“嵌入地图”
配置所需地图大小
复制 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>

- Alvin

这对我来说完美地运作了，如果您需要保留所有其他地图按钮和功能，这确实是一个非常好的技巧。 - Brenda

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bo Pennings · Accepted Answer

你可以使用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 像素。150 像素位于下面隐藏，150 像素位于上面隐藏。使用以下样式来隐藏 iframe 上面的 150 像素：

margin-top: -150px;