Bootstrap 和 iFrame 谷歌地图答案

【问题标题】：Bootstrap and iFrame google mapBootstrap 和 iFrame 谷歌地图
【发布时间】：2018-06-05 14:23:54
【问题描述】：

我使用 Bootstrap 模板（“时尚作品集”-http://startbootstrap.com/stylish-portfolio）为我的朋友制作了一个简单的作品集页面。

我应该说，我喜欢在业余时间编写代码，而且我不是专业人士，所以我为我的新手道歉！ :-)

无论如何，无法弄清楚如何更改嵌入在模板 html 中的 iframe 谷歌地图的位置。默认情况下，它设置为定位 Twitter 总部。但这并不是我真正想要的。

我需要它来在地图上显示费城，但我根本无法让它工作！更具体地说，这是地图需要提供的确切视图： https://www.google.com/maps/place/Philadelphia,+PA/@40.002498,-75.1180329,11z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1

当我查看地图的 html 代码时，我有这个：

    <!-- Map -->
<div id="contact" class="map">
    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
    <br />
    <small>
        <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A"></a>
    </small>
    </iframe>
</div>
<!-- /Map -->

就是这样。我真的可以在这里使用一些帮助，因为我最初认为是坐标，实际上并非如此。但我不知道如何更改地图的位置！或者带有当前 Twitter 信息的小方框。

谁有这方面的经验？

【问题讨论】：

也许bootstrap tag 可能是合适的。

标签： google-maps iframe twitter-bootstrap-3

【解决方案1】：

用这个改变 iframe，

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d195601.04562769792!2d-75.11803295!3d40.002497999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1401521095201" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

【讨论】：

嗨@integral 如何为此iframe添加缩放级别？

【解决方案2】：

解决你的问题很简单...

按照以下步骤操作：

转到https://developers.google.com/maps/documentation/embed/start
搜索商家或地点（其中显示“突出显示地点或地址”），然后点击“看起来不错！”。
输入您的 API 密钥，如果您没有 API 密钥，请按照以下说明创建一个（API 密钥），如果您有 API 密钥，请跳过步骤 3.1、3.1.1、3.1.2.、3.1.3。 , 3.1.4., 3.1 创建 API 密钥 3.1.1。通过https://code.google.com/apis/console 访问 API 控制台并使用您的 Google 帐户登录。 3.1.2.单击左侧菜单中的服务链接。 3.1.3.激活谷歌地图嵌入API服务。 3.1.4.单击左侧菜单中的 API 访问链接。您的 API 密钥可从 API 访问页面的简单 API 访问部分中获得。 Maps API 应用程序使用浏览器应用程序的密钥。

您的 API 密钥如下所示：AIzaSyCwI3k7JC29_KzlX1S_bC8fARpocLX5bRY
在您提供 API 密钥后，点击“完成”
复制并粘贴您将获得的代码到您的模板 index.html，然后您就完成了。
将高度和宽度改为100%（在哪里说

就是这样！

【讨论】：

【解决方案3】：

这里是代码

<iframe width="100%" height="80%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com/maps/place/Philadelphia,+PA/@40.002498,-75.1180329,11z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1"></iframe>

【讨论】：