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

Google Analytics始めてみた。

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

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

Evernote Webクリッパーを入れてみた♪

この記事は約 1 分で読めます。Web上で興味を持ったページの情報をそのまま手軽にEvernoteに保存する方法を試してみたいと思います。 日頃使っているEvernoteの便利な使い方その2です。(2 …