如何从新的谷歌地图嵌入中删除框？答案

【问题标题】：How to remove box from new Google Maps embeds?如何从新的谷歌地图嵌入中删除框？
【发布时间】：2014-03-21 09:17:04
【问题描述】：

Google 似乎改变了 iFrame 的工作方式。现在左上角有一个信息框，试图显示地名。问题是在爱尔兰，通常不可能使用企业名称来精确定位地图，而且您通常需要使用街道名称等，这使得该框无法使用，因为街道名称就在上面地图，以及地图旁边的页面！

我怎样才能摆脱这个东西？在此示例中，该企业与爱尔兰教练在同一栋建筑中。 Maps 坚持认为，通过输入地址，这位律师出于某种原因想要告知其潜在客户爱尔兰教练在哪里！

我试过 iwloc 但它什么也没做，我不能通过 CSS 和 jQuery 来影响它，因为它在另一个域上！

有什么想法吗？

【问题讨论】：

知道如果容器高度小于 300 像素，将显示卡片的最小版本而不是完整卡片，这可能很有用。
以上评论（关于容器高度）对我非常有用 - 谢谢！

标签： google-maps

【解决方案1】：

截至 2018 年 1 月 22 日，当您使用坐标而不是商家名称时，它可以工作

转到Maps Ie 获取您的坐标
转到Google Maps 并输入这些坐标（逗号分隔如下：33.319663、-111.89780100000002）
点击分享（位于左侧）
点击嵌入地图
配置您想要的地图大小
复制html

生成的 html 是这样的：

&lt;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&gt;&lt;/iframe&gt;

【讨论】：

这应该是公认的答案。另一个需要删除 '1m2!---!5e0!' 的答案从 URL 删除左上角的业务信息，但它也删除了地图图钉！（你可能不想要。）
这应该是公认的答案。自从 Google 更新了他们的 API 后，效果很好。
更简洁、更简单的示例 - 对于任何为此苦苦挣扎的人。请记住始终尝试使用最简单和最简单的解决方案。这是迄今为止实现您想要的最简单的方法。
这是获得坐标后最简单的方法。
这让我可以在移除左上角的信息框的同时保留地图图钉。但是，别针旁边没有地址了，但这对我来说很好。 2020 年 2 月。

【解决方案2】：

这停止在 2017 年 2 月左右工作。他们一定已经更新了他们的 API。 :(

请使用 2018 年 1 月 22 日 ZETA 的示例

~~这就是你的做法！~~

工作版

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2381.7399040776495!2d-6.261147484122739!3d53.34791197997939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!3m2!1sen!2sus!4v1462581622087" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

我注意到另一个网站嵌入的模式只有“查看更大的地图”文本，没有任何额外内容。只需删除几个字符。

为您提供完全嵌入

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2381.7399040776495!2d-6.261147484122739!3d53.34791197997939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O&#39;Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!3m2!1sen!2sus!4v1462581622087" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

这是被移除的部分

1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O&#39;Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!

我也尝试过其他地址。

【讨论】：

哇，这对我有用。不过需要一点尝试。
告诉我吧！当我第一次发现它时，我也在其他地址上进行了测试，但仍然难以置信。 :)
这对我也有用...我只是查找以1m2! 开头并以!5e0! 结尾的字符串并删除它...是的！
这个技巧很棒，但它也会删除地图标记以及信息窗口。
@KoldBane 你是对的，他们一定已经更新了 API。它不再起作用了。我能想到删除描述框的唯一方法是使用 JS 在 iFrame 中嵌入 CSS。对不起:(

【解决方案3】：

这里有两个答案，一个是摆脱信息框，另一个是在信息框中找到正确位置的答案。希望其中一位能有所帮助。

删除信息框

CAVEAT：此处的方法可能被视为“黑客”，如果 Google 更改其底层嵌入功能，可能会发生变化。

我最终在这里寻找类似的答案，并且根据其他人的说法，我想出了这个。答案与其他人相似，但希望能解释一些关于嵌入 url 以及如何使用 lat、long 和 zoom 生成嵌入 url（您可能从 CMS 中的位置插件中获得的东西）。

使用这篇文章作为搜索的基础，我发现了几篇不同的文章，概述了嵌入参数的细分，这些文章本身很有趣：- Decoding the Google Maps embedded parameters，导致这里http://blog.themillhousegroup.com/2016/08/deep-diving-into-google-pb-embedded-map.html

我从那些文章中得到的（我不会在这里再次解释所有内容）是对“pb”参数的细分。 “pb”是一种专有（？）格式，“m”是一个矩阵引用。此处显示的是从 Google 地图嵌入共享生成的嵌入代码示例。

<iframe src="https://www.google.com/maps/embed?pb=
    !1m18
        !1m12
            !1m3
                !1d2256.8774176856136
                !2d145.01353351606252
                !3d-37.79291244062522
            !2m3
                !1f0
                !2f0
                !3f0
            !3m2
                !1i1024
                !2i768
                !4f13.1
        !3m3
            !1m2
                !1s0x0%3A0x0
                !2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI
    !5e0
    !3m2
        !1sen
        !2suk
    !4v1532346966021
" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

通过玩弄，我发现整个“pb”参数可以简化为

<iframe src="https://www.google.com/maps/embed?pb=
    !1m7
        !1m2
            !1m1
                !1d2256.8774176856136
        !3m3
            !1m2
                !1s0
                !2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI
" width="450" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

注意：“m”后面的数字减少表示“矩阵”中的项目较少

以上嵌入适用于 lat = -37.7929167、long = 145.0157222 和 zoom = 17

的位置

正如另一个答案中所暗示的那样，似乎如果您只使用纬度和经度（使用此嵌入 API，而不是嵌入位置 API），则不会出现信息框，但我需要知道如何获取嵌入url 无需先通过 google 从共享中生成 url。

在“pb”分解中，有几个部分需要注意

地图比例1d2256.8774176856136
坐标2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI

这个比例可以从我在https://gis.stackexchange.com/questions/7430/what-ratio-scales-do-google-maps-zoom-levels-correspond-to 和https://www.esri.com/arcgis-blog/products/product/mapping/how-can-you-tell-what-map-scales-are-shown-for-online-maps/ 找到的算法得出

但我发现它与我期望的数字不太相符，所以我调整了缩放级别来给我

var mapScale = 591657550.5 / Math.pow( 2, zoom + 1);
// The results of this goes after the "1d" part in the map scale

对于坐标，在 lat 和 long 上使用 base64（所示示例用于 javascript）来获取结果字符串。我已经使用十进制度和度分秒格式工作了。

var base64 = btoa([lat,long]); // lazy "lat,long" formatting
// the result of this goes after the "2z" part in the coordinate

如果您想编写此脚本，这里有一个使用 javascript 生成 iframe 的简单示例，但您可能希望创建整个 src 服务器端。请注意：这不是关于 javascript 解决方案，而是脚本解决方案的示例。

    // create the iframe and with the required properties.
    var iframe = document.createElement("iframe");
    iframe.width = 450;
    iframe.height = 450;
    iframe.frameborder = 0;
    iframe.style.border = 0;
    iframe.setAttribute('allowFullScreen', '')
    document.body.appendChild(iframe)
    
    // sample lat and long.
    var lat = -37.7929167;
    var long = 145.0157222;
    var zoom = 17;
    
    // get the scale
    var mapScale = 591657550.500000 / Math.pow( 2, zoom+1);
    // get the base64 representation
    var base64 = btoa([lat,long]); // lazy "long,lat" formatting
    // set the source of the iframe
    iframe.src = 'https://www.google.com/maps/embed?key=asdfsdfsf&pb=!1m7!1m2!1m1!1d' + mapScale + '!3m3!1m2!1s0!2z' + base64;

我在 codepen 上创建了一个示例，显示了原始嵌入、缩小的嵌入、没有比例的嵌入和脚本解决方案。 https://codepen.io/mcgern/pen/zLZJmQ

信息框中的正确地名

您可能已经尝试过此操作，但如果您要添加的商家有 Google 地点 ID，您可以使用 https://developers.google.com/places/place-id 找到它。获得地点 id 后，您可以像这样在地点嵌入 url 中使用它

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ02vd- 
4QOZ0gR4ZG28bSShpk&key=<INSERT_API_KEY>" allowfullscreen></iframe>

（我随便找了一个地方，看起来和爱尔兰教练是同一栋楼）

【讨论】：

非常感谢您提供的方便脚本。我可以确认它在 2019 年 7 月 30 日仍然有效。就我而言，我不得不使用 iframe 而不是 JavaScript API，这是唯一可行的解决方案。

【解决方案4】：

2020 年更新：

1.在谷歌地图中找到你的位置

2.右键点击你的目标并选择What's here?

3.在屏幕下方你可以看到这样的坐标：29.586525, 52.546173

4.现在将坐标粘贴到搜索框中

5.点击share按钮并选择Embed a map并复制iframe标签

【讨论】：

【解决方案5】：

进一步挖掘后，您要做的是删除谷歌地图的地点卡

之前回答过类似的问题： Google Maps Embed - Remove Place Card

【讨论】：

感谢您的链接。他们的解决方案有点老套，但它可能是最好的选择：\
那个解决方案不是解决方案。这是一个可怕的黑客。真正的答案应该是在生成嵌入代码时是否存在抑制它的东西。这也是我想知道的。
@neil1967 似乎有，但没有使用嵌入选项，而是使用带有 API 密钥的地图 API，现在似乎只有“启用计费”才有可能。这说明了黑客攻击的意义

【解决方案6】：

2017 年中，您可以使用内置的 Google api 控制标志disableDefaultUI

像这样使用它：

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

参考：https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults

&lt;iframe src="https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-disableUI" width="100%" height="300" frameborder="0"&gt;&lt;/iframe&gt;

【讨论】：

我刚刚得到了这个解决方案，嵌入 iframe 的方式很糟糕。

【解决方案7】：

只需输入沿途的目的地，例如规定要走的路，它就会删除替代品，因此您仍然可以嵌入 iframe

【讨论】：

【解决方案8】：

只需将此代码放在 css(stye.css) 上：

.place-card .place-card-large{
    display: none !important;
}

此评论框将被删除。最好在地图容器中使用一个类，例如

.my-map .place-card .place-card-large{
    display: none !important;
}

完成！

【讨论】：

【解决方案9】：

只需从嵌入代码中删除几个字符即可。

普通嵌入：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.040079626225!2d76.32828391488012!3d10.013548175548115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b080cf735671585%3A0x515419464975212e!2sCoredes+-+UX+Studio!5e0!3m2!1sen!2sin!4v1536297325864" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

您只需删除1m2! 和1sen! 之间的字符

修改后的代码：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.040079626225!2d76.32828391488012!3d10.013548175548115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1sen!2sin!4v1536297325864" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

我在不同国家尝试了十几个地方，对我来说效果很好。

【讨论】：

【解决方案10】：

不是你想要的，但如果你的律师的地址出现在谷歌地图上，那为什么不直接嵌入地址搜索。

<iframe 
width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/search?q=1873 Bachelors Walk, Dublin,
Ireland
&key=AIzaSyDsQc1PNQhYYVbGn9R4_vWY3SOlEKOM7JU">
</iframe>

http://jsfiddle.net/zE8tE/2/

【讨论】：

因为当我这样做时，它坚持将“爱尔兰教练”附加到 Placecard 中地址的开头，如屏幕截图所示。我似乎无法控制只指向建筑物。它绝对坚持决定业务是什么，在一个充满业务的商业中心！大声笑

【解决方案11】：

我的简单解决方案：将 Firefox 与“AdblockPlus”和“AdblockPlus Element Hiding Helper”插件一起使用很容易识别框并将其删除。在 Google 重命名隐藏元素（或删除您创建的元素隐藏规则）之前，它永远不会返回。这种方法也适用于从我们最喜欢的任何网站中删除几乎所有元素——我大量使用它从我经常访问的许多页面中删除各种垃圾。需要一些练习才能获得使用这种技术的感觉——但它工作得很好。而且，Ghostery 和 Adblock Plus 的结合是上天赐予的礼物。

【讨论】：

我相信 OP 正在（或者更确切地说“曾经”）寻找服务器端解决方案。
想象一下要求每个访问您网站的用户下载 adblock 以删除地图上的框哈哈哈