MapPress Easy Google Mapsをレスポンシブ表示にする方法

APIやらなんやら、さっぱり詳しくない私にとって貴重なプラグインです。

地図の代表的プラグイン

このプラグイン、地図でちょっとした観光案内をしたくて導入しました。

JAVAスクリプトやら、APIやら知識のまったくない私にとっては、ありがたいプラグインです。

ただ、PCで表示が小さいので、「地図をもっと大きくできないかな～」と悩んでいました。

いろいろ調べた結果、レスポンシブ対応の表示設定の方法を発見したのでご紹介します！

レスポンシブ対応の設定方法

レスポンシブ対応にする方法は以下のとおりです。

まず、管理画面から「MapPress」を選択。

そして、初期設定のマップサイズで「太さ」を「100％」にします。※「Height」（高さ）は具体的な数字を入力します。

この状態で「変更を保存」すると、PC画面では以下のように表示されます。

一方、スマホでは以下のように表示されます。

きちんとレスポンシブ対応にすることができました。

ちなみに、「太さ」と「Height」を両方とも１００％に設定すると、画面上で地図がつぶれて表示されてしまいました。とりあえず「太さ」だけ「100%」に設定して、「Height」はお好みに応じた具体的な数字を入れたほうが良さそうです。