「レスポンシブWebデザインのテーマ「newspaper」でGoogle MAPが正常に表示されない」とユーザーのかたからご指摘があったと@ivyjpさんからfacebookのGeeklog Japaneseに連絡があったので、この問題を解決するべく、早速原因調査を開始しました。

初めJavaScriptが原因だろうと思い調べてみたのですが違うようだったので、CSSを調べてみました。

テーマ「newspaper」では地図が表示されないのに(Google Chromeでは表示される)テーマ「sincere」では地図は正常に表示されるので、この2つのテーマのCSSの記述の違いは？と考えたところ、テーマ「newspaper」の方にだけimgにmax-width:100%が設定されているのでテーマ「newspaper」のmax-width:100%をコメントアウトしてみたところ地図は表示されました。

という事で原因は、imgに設定している max-width:100%なのですが、レスポンシブWebデザインでこの記述を消す事は出来ないので、「Google MAP」の地図が表示される部分のIDであるmap_canvas_m1のimgにmax-width:100%を打ち消すmax-width: noneを設定すると正常に表示されるようになりました。

テーマ「newspaper」をお使いのかたのかたでGoogle MAPを表示するページがある場合、お手数ですが次の記述をcustom.cssの785行目あたりに追記して下さい。

/* Google MAPに影響を与えないようにする[ */
#map_contener_m1 img {
  max-width: none;
}
/* Google MAPに影響を与えないようにする] */