2014/03/21

GoogleMap - InfoWindowの閉じるボタンが表示されない問題

 Foundation, Google Maps, CSS

---

 動作環境: Foundation5, GoogleMapsV3

UIフレームワークにFoundation5を使用した環境で、Google MapのInfoWindowの閉じる（×）ボタンが正しく表示されないという現象が発生しました。

（下図の赤丸の箇所）

原因は、Foundationのスタイルシート設定(IMGタグのmax-width)によるものでした。
Google Map内のImage要素にこの影響が及ばないように、スタイルシートに以下の設定を追加します。

（#map -> googlemapを表示しているdivタグのidを指定）

正しく表示されました。

実はfoundation.cssには、id:map_canvasに対して上記と同様の設定がされています。
その為、Google map表示のdivタグのIDをmap_canvasにしておけば、上記設定は不要です。

今回の現象はFoundationのCSSが原因でしたが、それ以外の原因で起きる場合もあると思いますので、参考にして頂ければと思います。