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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

別窓でリンク先のページをポップアップで開きたいとき

この記事は約 1 分で読めます。 よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。 今回、たまたまポップアップでリンク …

WordPress 「Contact Form7」でエラーメッセージが出たときに確認したこと

この記事は約 1 分で読めます。 「Contact Form7 4.4」をバージョンアップした途端、エラーメッセージが出るようになりました。 エラーメッセージが出たことで、再度設定を見直すキッカケがで …

no image

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

Facebookページ コメント返信機能の設定をしてみた!

この記事は約 1 分で読めます。 Facebookページにコメントに対するコメントの返信、どのようにされてましたか? 私は都度相手の名前を入れて、誰に対する返信なのかを表示していました。 今回「返信機 …

no image

ファビコンにチャレンジ。

この記事は約 1 分で読めます。前々から気になっていた「ファビコン」。 いろんなサイトのロゴとか何かのイラストとか・・、ブラウザのタブに小さなアイコンとして付いてるアレ・・。 せっかく自分のサイトを作 …