如何从新的谷歌地图嵌入中删除框？
Posted
技术标签:
【中文标题】如何从新的谷歌地图嵌入中删除框？【英文标题】：How to remove box from new Google Maps embeds? 【发布时间】：2014-03-21 09:17:04 【问题描述】：Google 似乎改变了 iFrame 的工作方式。现在左上角有一个信息框，试图显示地名。问题是在爱尔兰，通常不可能使用企业名称来精确定位地图，而且您通常需要使用街道名称等，这使得该框无法使用，因为街道名称就在上面地图，以及地图旁边的页面！
我怎样才能摆脱这个东西？在此示例中，该企业与爱尔兰教练在同一栋建筑中。 Maps 坚持认为，通过输入地址，这位律师出于某种原因想要告知其潜在客户爱尔兰教练在哪里！
我试过 iwloc 但它什么也没做，我不能通过 CSS 和 jQuery 来影响它，因为它在另一个域上！
有什么想法吗？
【问题讨论】：
知道如果容器高度小于 300 像素，将显示卡片的最小版本而不是完整卡片，这可能很有用。 以上评论（关于容器高度）对我非常有用 - 谢谢！ 【参考方案1】：截至 2018 年 1 月 22 日，当您使用坐标而不是商家名称时，它可以工作
-
转到Maps Ie 获取您的坐标
转到Google Maps 并输入这些坐标（逗号分隔如下：33.319663、-111.89780100000002）
点击分享（位于左侧）
点击嵌入地图
配置您想要的地图大小
复制html
生成的 html 是这样的：
<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>【讨论】：
这应该是公认的答案。另一个需要删除 '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" 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'Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!3m2!1sen!2sus!4v1462581622087" frameborder="0" style="border:0" allowfullscreen></iframe>
这是被移除的部分
1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O'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
" 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
" 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 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
<iframe src="https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-disableUI" width="100%" height="300" frameborder="0"></iframe>【讨论】：
我刚刚得到了这个解决方案，嵌入 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" 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" frameborder="0" style="border:0" allowfullscreen></iframe>
我在不同国家尝试了十几个地方，对我来说效果很好。
【讨论】：
【参考方案10】：不是你想要的，但如果你的律师的地址出现在谷歌地图上，那为什么不直接嵌入地址搜索。
<iframe
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 以删除地图上的框哈哈哈以上是关于如何从新的谷歌地图嵌入中删除框？的主要内容，如果未能解决你的问题，请参考以下文章