jquery - 谷歌地图 Iframe 嵌入在 bootstrap/foundation 上不起作用

Question

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

#map_canvas img {
max-width: none;
}

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

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

我不确定要编写/附加什么才能让 google maps iframe 很好地播放。

Answer 1

您使用的是交互式 map iframed 还是您正在使用 iframing 的静态谷歌地图图像？

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

对于交互式 Google map

// 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
    };

对于静态 Google map 图像

当声明图像 src 时，它应该看起来像这样:

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

您所做的只是更改一些值，您可以将此 map 放置在任何您喜欢的位置。

居中选项

• 城市/州:印第安纳州普莱恩菲尔德
• 邮政编码:46168
• 地址:1917 Hawthorn Drive, Plainfield, IN
• 经纬度:39.77,-86.16