谷歌地圖信息窗口看起來搞砸了

看看這個網站並點擊地圖上的標記。你可以看到信息窗口被搞砸了。邊界是非常鋸齒狀的，不牢固。我該如何解決這個問題以及是什麼原因造成的？ http://waterski.allthingswebdesign.com/index.php/site/directions 谷歌地圖信息窗口看起來搞砸了

來源

2011-07-07 Catfish

我使用html5reset，如果你走在reset.css一看文件，它具有以下幾行導致谷歌地圖的問題。他們甚至在那裏說明它會導致Google地圖出現問題。

/* Responsive images and other embedded objects 
    Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 
    There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */ 
img, 
object, 
embed {max-width: 100%;}

來源

2011-07-08 19:52:23 Catfish

所以......你爲什麼改變它以使它工作？ –

老線程，所以我不記得那麼好，但我認爲你只是註釋了最大寬度：100％。 – Catfish

在我的case我需要'img'來爲我的網站的其餘部分保留'max-width'，但是我只是爲地圖img的選擇器設置了'img：{max-width：inherit;}'謝謝 –

問題隱藏在您的CSS中，它會覆蓋Google的一個。您有幾種選擇來解決這個問題：裏面的iframe

放地圖沒有任何CSS
讓你的CSS規則更具體的（例如：不使用規則進行簡單的div，h1和其他標記
化妝氣泡您的自定義樣式

最簡單的方法是當然的第一個

更新：Iframe是駐留在頁面內的框架。因此，您需要僅使用Google地圖創建另一個.html文件，並且不包含您的CSS文件。然後，你的iframe中看起來就像這樣：

<iframe src="map.html" width="100%" height="300"><p>Please upgrade your browser for Iframe support</p></iframe>

來源

2011-07-07 15:47:15 WASD42

你可以發佈關於如何把地圖到iframe代碼？我從來沒有與iframe的工作，我試圖改變'

Catfish

@Catfish：我已經更新了我的答案:) – WASD42

我試過了iframe但它與codeigniter過於複雜，所以我只是決定在我的重置文件中找到哪一行導致問題。請參閱下面的答案。 – Catfish

嘗試刪除你的CSS重置代碼，並檢查這是否修復它

來源

2011-07-07 16:06:10

這是重置導致的問題。 – Catfish

我有，當我InfoWindow它出現在了同樣的問題，出現了扭曲： Google Maps distorted InfoWindow
解決方法： 我註釋掉谷歌-button.css從頁面。

<!--<link rel="stylesheet" href="google-buttons.css" type="text/css" media="screen" />-->

Google自己的按鈕CSS會干擾他們的地圖CSS。

來源

2012-07-25 23:54:02

這是有點晚了答案，但我得到了它的固定與此：

#map img { 
    max-width: none; 
}

來源

2012-10-24 05:05:53 Joonas

谷歌地圖信息窗口看起來搞砸了

回答

相關問題