先日、『世界カフェブログ』というサイトを立ち上げました。
日本だけでなく、海外を含む世界中のカフェを紹介するサイトです。
もともとカフェ好きで、カフェで仕事をすることの多い私たち夫婦ですが
「行く先々の素敵なカフェを紹介できたらいいなー」
と思って、先日マレーシアに行く前に急いで立ち上げました。
更新はもっぱら妻が担当しています(笑)
よければぜひ訪問してください。
→ 世界カフェブログ
「世界カフェブログ」のサイトは、カフェの情報だけでなく
Google Mapsを使って地図表示もしています。
Google Mapsを使ったサイト作りに関しては
以下のサイトを参考にさせていただきました。（多謝！）
→ WordPressとプラグインを使って、お店紹介サイトを作る方法
ところが、上記サイトに書かれているとおりに作ったのに
なぜか情報ウィンドウが壊れて表示されてしまいました(>_<)
「情報ウィンドウ」というのは、「吹き出し」とか「バルーン」とも呼ばれるもので、
その名の通り地図マーカーの追加情報を表示するためのウィンドウです。
こういうの↓
こんなふうに、なんとも形容しがたいかんじに壊れてしまいました。
何かJavascriptでもコピーミスしたかなーとか、
情報ウィンドウの形を設定するオプションがあるのかなーとか、
いろいろ調べてみたのですがわからず・・・。
結局海外のサイトを漁っていたら、まったく同じ現象で悩んでいる方を発見しました。
情報ウィンドウの表示が壊れたのは、CSSが原因でした。
以下のように設定してあげれば直ります。
#world-map div,
#world-map img {
max-width: none !important;
vertical-align: baseline !important;
box-sizing: content-box;
}
#world-map のところは、Google Mapsの表示部分のID（またはClass）です。
適宜変更してください。
直りました♪
参考にしたサイトはこちら。
http://devot-ee.com/add-ons/support/gmaps/viewthread/8666