Simple Map でレスポンシブ化する方法

地図を簡単に表示できる Simple Map プラグイン

WordPress でお店のサイトとか作ってると、Google Map で地図を表示させたいことが多々あります。
そんな時、Simple Map プラグインを使うと、以下のようなショートコードで簡単に地図を表示させることができて非常に便利です。

[map addr="東京都千代田区千代田1-1"]皇居[/map]

• WordPress › Simple Map « WordPress Plugins
• Simple Map – 超簡単＆スマフォ対応のGoogle Map | Firegoby

レスポンシブ化されない？

ただこのプラグイン、作者様のサイトではレスポンシブ対応となってるのですが、そのままの大きさで表示されることがあります。
使ってるテーマにもよるんでしょうけど。。

そんな時は、テーマの style.css に以下のコードを追加するとうまくレスポンシブ化されて表示されるようになります。

style.css

.simplemap {
  max-width: 100%;
}

• Simple Mapプラグインを使用した場合マップのズームアイコンが表示されない | BizVektor-Forum
• レスポンシブWEBデザインの基本　max-widthで中央揃えレイアウト | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ

お困りの方がいればお試しあれ。