Bootstrap和iFrame谷歌地图

我使用了Bootstrap模板("Stylish Portfolio" - http://startbootstrap.com/stylish-portfolio)为我的一个朋友制作了一个简单的作品集页面。

我应该说，我喜欢在业余时间做编码，而且我在任何方面都不是专业人员，所以我为我的新手道歉!: -)

无论如何，不能弄清楚如何改变的位置iframe谷歌地图嵌入在模板的html。默认设置为定位twitter总部。但那不是我真正想要的。

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

当我查看地图的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信息的小框。

谁有这方面的经验?

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

你的问题很容易解决……

遵循以下步骤:

进入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. 访问api控制台https://code.google.com/apis/console并使用您的Google帐户登录。3.1.2.单击左侧菜单中的Services链接。3.1.3.激活谷歌地图嵌入API服务。3.1.4.单击左侧菜单中的API Access链接。您的API密钥可以从API访问页面的简单API访问部分获得。地图API应用程序使用浏览器应用程序的Key。

您的API密钥看起来像这样:AIzaSyCwI3k7JC29_KzlX1S_bC8fARpocLX5bRY
输入API密钥后，点击"DONE"
复制并粘贴你将得到的代码到你的模板index.html，你就完成了。
将高度和宽度更改为100%(其中表示

就是这样!

下面是代码

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

相关内容

最新更新

热门标签：