レスポンシブデザイン対策でGoogleMapプラグイン「Google Maps Generator for WordPress」を導入
2013年11月9日
レスポンシブデザインでGoogleMapを使うときにちょっとやっかいなのがiframeによる埋め込みコード。PC向け表示では良いんですが、スマホ表示では横幅が広すぎて見にくいとか横スクロールが発生したりで気になるところです。
CSSで処理しても良いんですが、もうちょっとスッキリやりたいなと思っていたら有料プラグインではありますが「Google Maps Generator for WordPress」というものがあったので試しに導入してみました。
Google Maps Generator for WordPress
使い方は簡単で、インストールするとエディタ画面に専用ボタンが表示され埋め込みたいところでボタンをクリック。
設定画面で入力するとGoogleMapが埋め込まれます。
レスポンシブデザインに対応も嬉しいところですが、マーカーが選べたりスキンも選べたり（自作も可能なようです）けっこう高機能。
[mgl_gmap mapid = “125” address = “福島県 郡山駅” lat = “37.397983” long = “140.38841200000002” zoom = “13” skin = “roadmap” ][mgl_marker address=”イオンタウン郡山” lat=”37.391361″ long=”140.38867890000006″ ]イオンタウン郡山[/mgl_marker][mgl_marker address=”郡山駅” lat=”37.397983″ long=”140.38841200000002″ ]郡山駅[/mgl_marker][/mgl_gmap]
こんな感じで複数のマーカーの設置もOKとなかなか便利。
ちなみにウィジェットにも設置可能なのでFooterなどにも設置できます。
コレで16ドルという価格なので、意外とお得感アリです。