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

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

この記事は約 1 分で読めます。 日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。 Photoshopでレイアウ …

no image

Facebook タイムラインのカバー画像を設定してみた♪

この記事は約 1 分で読めます。 Facebookのタイムラインが登場して、少し経ちます。 カッコイイ画像をカバー画像にされている方もお見かけするのですが、私はまだ画像がしっくり決まらずジタバタしてい …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

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

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

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …