谷歌地图嵌入 - 删除地方卡

Question

我正在使用新的Google地图嵌入代码（iFrame）向我的网站添加一个小地图，但我无法隐藏左上角的新地址框（见下图）。

我已经通过点击“共享和嵌入地图”选项生成地图代码（请参见下图），但我想知道是否需要使用完整的API来实现此目的。

到目前为止，我发现的所有资源都只是讨论旧的嵌入版本并禁用不相同的信息气球，我唯一知道的是该框的HTML类被称为“地方”卡“但搜索仍然没有带给我任何东西。

非常感谢任何正确方向的帮助或观点。

Answer 1

您可以使用css隐藏所有按钮。在隐藏和所需大小上创建容器div宽度溢出。将新的Google地图iframe /嵌入内部放置一个bigrsize。要定位地图，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高300px。 150px隐藏在下方，150px隐藏在顶部。要隐藏iframe顶部的150，请使用：

  

margin-top：-150px;

Answer 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

Answer 3

您可以尝试以下操作：

1. 转到https://www.maps.ie/coordinates.html获取坐标
2. 转到Google地图并输入这些坐标（以逗号分隔：33.319663，-111.89780100000002）
3. 点击共享（位于左侧）
4. 点击嵌入地图
5. 配置所需的地图大小
6. 复制html

您的iframe如下所示：

Answer 4

$('.place-card-large').css('display', 'none');