Google Maps APIの壊れた吹き出しを直す方法

先日、『世界カフェブログ』というサイトを立ち上げました。
日本だけでなく、海外を含む世界中のカフェを紹介するサイトです。

もともとカフェ好きで、カフェで仕事をすることの多い私たち夫婦ですが
「行く先々の素敵なカフェを紹介できたらいいなー」
と思って、先日マレーシアに行く前に急いで立ち上げました。

更新はもっぱら妻が担当しています(笑)
よければぜひ訪問してください。
→ 世界カフェブログ

情報ウィンドウが壊れてしまった!

「世界カフェブログ」のサイトは、カフェの情報だけでなく
Google Mapsを使って地図表示もしています。

Google Mapsを使ったサイト作りに関しては
以下のサイトを参考にさせていただきました。(多謝!)
→ WordPressとプラグインを使って、お店紹介サイトを作る方法

 

ところが、上記サイトに書かれているとおりに作ったのに
なぜか情報ウィンドウが壊れて表示されてしまいました(>_<) 「情報ウィンドウ」というのは、「吹き出し」とか「バルーン」とも呼ばれるもので、 その名の通り地図マーカーの追加情報を表示するためのウィンドウです。 こういうの↓ 情報ウィンドウ

こんなふうに、なんとも形容しがたいかんじに壊れてしまいました。
情報ウィンドウが壊れた

何かJavascriptでもコピーミスしたかなーとか、
情報ウィンドウの形を設定するオプションがあるのかなーとか、
いろいろ調べてみたのですがわからず・・・。

結局海外のサイトを漁っていたら、まったく同じ現象で悩んでいる方を発見しました。

CSSが原因でした。

情報ウィンドウの表示が壊れたのは、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)です。
適宜変更してください。

Google Maps 情報ウィンドウ
直りました♪

 

参考にしたサイトはこちら。
http://devot-ee.com/add-ons/support/gmaps/viewthread/8666

 

LINEで送る
Bookmark this on Yahoo Bookmark
[`buzzurl` not found]
このエントリーをはてなブックマークに追加

About the author:

そうめい

そうめいです。読んでくれてありがとうございます。 まだいろいろと整備中なブログではありますが、徐々に整えていきますので長い目でみていただけるとありがたいです。 フォローはこちら→ Twitter / Facebook

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です