Webの記録

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

投稿日:2014年10月18日 更新日:

この記事は約 3 分で読めます。

Simple-Map

GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。

画面の横幅が480px以下になった時に静的なMapを表示してくれて、しかもシンプルで簡単にGoogleMapを設置できます。レスポンシブデザインのサイトで「Simple Map」が便利だったので、メモです。

【2016.6.22よりGoogleMap APIキーの取得が必要になりました】


特徴

  • プラグインを有効化すれば、投稿画面でショートコード1つで簡単にGoogleMapが設置できる
  • 480px以下になった時にを静的なMapを表示
  • レスポンシブデザインのサイトとフレンドリー
  • 機能はシンプル
  • サイズやzoomなど、簡単に設定ができる
  • IE8以上対応
  • プラグイン作者は日本人


設置方法

プラグイン新規追加画面から、「Simple Map」を検索して有効化します。
Simple-Map_img01


あとは設置したい記事や固定ページの投稿画面から、設置したい箇所に以下のように入力するだけでGoogleMapを簡単に設置できます。
※デフォルトの地図の倍率は16です。倍率を変えたい時はzoomに値を入れます。

[map zoom="15"]福岡県北九州市小倉北区大畠3-2-56[/map]

Simple-Map_img02


他にも記述方法あります。(※プラグイン作者の方のソースコードを拝借しました)
上の例と同じように住所で地図を設置する場合

[map addr="東京都千代田区永田町1-7"]

緯度経度から地図を設置する場合

[map lat="35.677443" lng="139.74498"]緯度経度で指定[/map]

幅と高さを指定する場合

[map width="400px" height="300px"]東京都千代田区永田町1-7[/map]

ブレークポイントを設定する場合

[map breakpoint="320px"]東京都千代田区永田町1-7[/map]



他にも、いろいろ設定が細かくできます。詳しくはプラグイン作者の方のブログでご確認ください。
【参考】Simple Map – 超簡単&スマフォ対応のGoogle Map|FIREGOBYさま

追記(2016.8.9)

GoogleMapを使用するために、APIキーを取得しなければなりません。
取得方法は、以下のブログを参考にさせていただきました。
Google Maps の APIキー を簡単に取得する|ねんでぶろぐ さま

GoogleMap関連の過去記事

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …

no image

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

この記事は約 1 分で読めます。今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。 名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、 …

no image

jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も数枚の画像を使ったスライドショーを作りたいと思います。 見た目がキレイで、ユーザーが自由に前後の画像へ移動する事も出来て、ちょっとしたテキストも入れられるという・ …