Bootstrap和iFrame谷歌地图

Question

我使用了一个Bootstrap模板（“Stylish Portfolio” - 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信息的小框。

有没有任何对此有经验的人？

- Daniel J. Bertelsen

---

也许bootstrap标签比较合适。 - geocodezip

Answer 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

---

嗨@integral，如何将缩放级别添加到此iframe中？ - Srinivas Guni

Answer 2

这是代码。

<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>

- Anburaj_N

Answer 3

你的问题的解决方案非常简单...

按照以下步骤操作：

1. 前往https://developers.google.com/maps/documentation/embed/start
2. 在“突出显示地点或地址”处搜索商家或地点，然后单击“看起来不错！”。

3. 输入您的API密钥。如果您没有API密钥，请按照下面的说明创建一个（API密钥）。如果您已经有了API密钥，请跳过步骤3.1、3.1.1、3.1.2、3.1.3、3.1.4。

   创建API密钥 3.1.1. 访问https://code.google.com/apis/console上的API控制台，并使用您的Google帐户登录。 3.1.2.从左侧菜单中单击“服务”链接。 3.1.3.激活Google Maps嵌入式API服务。 3.1.4.从左侧菜单中单击“API访问”链接。您的API密钥可从API访问页面的简单API访问部分获得。Maps API应用程序使用浏览器应用程序的密钥。

   您的API密钥看起来像这样：AIzaSyCwI3k7JC29_KzlX1S_bC8fARpocLX5bRY

4. 输入API密钥后，单击“完成”

5. 复制并粘贴您将获得的代码到模板index.html中，然后完成。

6. 将高度和宽度更改为100%（在哪里说

就这些！

- BigDropGR