Google Maps Iframe Embed在引導程序/基礎上不起作用

Question

當img設置為max-width時，Google會麻煩將位置居中。 有一個解決方案，就是

#map_canvas img {
max-width: none;
}

不過，這似乎對我不起作用，因為我沒有使用Javascript API，因此似乎沒有map_canvas。 我只是使用iFrame進行嵌入。

當我嘗試在iframe周圍添加div並設置參數時，我仍然得到相同的結果。

我不確定要編寫/添加什么內容才能使Google Maps iframe正常播放。

Answer 1

您是否正在使用交互式地圖iframed或靜態的Google地圖圖像iframing？

如果您使用的是帶iframe的互動式Google地圖，則需要確保在地圖變量中聲明'center'屬性。 不幸的是，地圖僅在初始加載頁面時居中，這意味着如果以較大的分辨率加載頁面，然后按比例縮小地圖，則地圖將偏離中心，因為在創建地圖時，中心被定義為不同的位置（以較小的分辨率刷新可解決此問題。）

對於互動式Google地圖

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

您要做的就是更改一些值，然后可以將此地圖放置在所需的任何位置。

居中選項

• 城市/州：Plainfield，IN
• 郵政編碼：46168
• 地址：印第安納州普萊恩菲爾德市霍桑大道1917號
• 時長：39.77，-86.16