現在WordPressテーマとサイト設計を見直しています。サイト内に未整備箇所がありますが、ご了承ください。

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

 

PR
最新情報をチェックしよう!