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

JavaScriptオンオフの設定と確認。

この記事は約 2 分で読めます。 最近「jQuery」が面白くていろいろ試していますが、JacaScriptがオフ環境ではあんまり意味のないモノになっています。 全くWebの知識がない人にとって、Ja …

no image

Google Analytics始めてみた。

この記事は約 2 分で読めます。前々からアクセス解析は少し興味あって・・・。 「FC2」とか、「NINJA TOOLS」のアクセス解析を利用していたのですが、前々から気になっていた「Google An …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

WordPressサイトでパンくずリストを簡単設置♪

この記事は約 1 分で読めます。 Webサイトで、よく階層が深くなってくると「パンくずリスト」を付けます。 WordPressサイトでも簡単にパンくずリストを付けられないかな?という事で、プラグインを …

no image

WordPress お問い合せフォームプラグイン「Trust Form」を試してみた♪

この記事は約 1 分で読めます。 今回は、WordPressのお問い合せフォーム用プラグイン「Trust Form」を試してみました。 ・・・と言っても、まだローカル環境でのテスト操作なので全ての実験 …