Google Maps Iframe Embed 在引导程序/基础上不起作用答案

【问题标题】：Google Maps Iframe Embed Not functional on bootstrap/foundationGoogle Maps Iframe Embed 在引导程序/基础上不起作用
【发布时间】：2012-12-03 13:32:06
【问题描述】：

当 img 设置为最大宽度时，Google 地图无法将位置居中。有一个解决办法，就是把

#map_canvas img {
max-width: none;
}

这似乎对我不起作用，因为我没有使用 Javascript API，所以似乎没有 map_canvas。我只是使用 iFrame 嵌入。

当我尝试在 iframe 周围添加一个 div 并设置参数时，我仍然得到相同的结果。

我不确定要编写/附加什么内容才能使 google maps iframe 运行良好。

【问题讨论】：

标签： jquery html css twitter-bootstrap zurb-foundation

【解决方案1】：

您是使用 iframe 的交互式地图还是 iframe 的静态谷歌地图图像？

如果您通过 iframe 使用交互式谷歌地图，则需要确保在地图变量中声明“中心”属性。不幸的是，地图只会在页面初始加载时居中，这意味着如果您以较大的分辨率加载页面然后按比例缩小地图将偏离中心，因为在创建地图时，中心被定义为不同的位置（以较小的分辨率刷新可以解决此问题。）

对于交互式谷歌地图

// Google Maps
var map;
function initialize() {
    var mapOptions = {
        zoom: 17,
        draggable: true,
        center: new google.maps.LatLng(38.913914,-94.637427), // this one
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

对于静态谷歌地图图片

在声明图像 src 时，它应该如下所示：

<img src="maps.googleapis.com/maps/api/staticmap?center=46168&zoom=11
&size=300×300&maptype=roadmap&sensor=false" alt="google map" />

您只需更改一些值，即可将此地图放置在您想要的任何位置。

居中选项

城市/州：印第安纳州普兰菲尔德
邮编：46168
地址：1917 Hawthorn Drive, Plainfield, IN
经纬度：39.77,-86.16

【讨论】：