WordPressにSimpleMapでGoogleMapを正確に表示

サイト内検索

GoogleMapのどんな場所でもピンポイントで正確にブログに表示する。

今日は、WordPressブログにGoogleMapを簡単に表示させる事ができるプラグイン!Simple Mapでマップを正確に指定して表示する方法を覚書として書いておきたいと思います。

Simple Mapは、誰でも簡単にGoogleMapをブログに表示させることのできる便利なプラグインです。

Simple Mapのインストールと設定

WordPressの新規プラグイン追加で、Simple Mapと入力し検索。

インストールして有効化するだけです。

設定等は必要ありません。

このプラグインはモバイルにも自動対応になっているのが嬉しいですね。

あとは、ブログの記事のMapを表示したい場所にショートコードをテキストモードで書き込むだけです。

Simple Mapの使い方

Googlemapの埋め込みで、自分の指定したポイントと少しずれているとか、広大な野原の中のポイントを表示したい場合、ついでに自分の好きな画像の大きさにして表示される地図の倍率も指定ちゃいましょう。

今日紹介するMapの表示方法は以下の4点を指定してやる方法です。

  • Mapの倍率を指定
  • Mapの大きさを指定
  • 表示ポイントの緯度と経度を指定
  • ポイントクリックで場所の名前を表示

試しに黒山三滝近くの家を緯度(35.941131)経度(139.245098)を指定して地図の倍率を16、画像の大きさを500×300の大きさで「僕の別荘(ウソ)」として表示してみました。(持ち主さん、ごめんなさい。)

2016/09/12 この度、サイト軽量化のためsimple mapプラグインを外してしまったため、現在サンプル表示はありません。

このように表示され、ポイントを経度緯度でとってあるため、ポイントがずれることもなく、またこの場所表記が変わっても、ポイントは変わることがありません。

河原なども、住所とかじゃ自分の表示したい場所が表示されませんが、経度緯度を指定してポイントすれば、家でも河原でも山の中でも何処でも自在に表示できるんです。

[map zoom="" width="px" height="px" lat="" lng=""][/map]
私の使用例は以下のように型紙を作っておきます。
[map zoom="12" width="500px" height="300px" lat="●" lng="●"]●[/map]

表示させるには、テキストモードで上のコードの6か所を適当な値に変更して書き込むだけです。

では順番に説明していきます。

GoogleMapに住所を入力し場所を検索

まずは、住所を検索し、出てきた地図の自分がポイントしたい場所にポイントし、倍率を最大に拡大します。(これをしないと、拡大していくとポイントがずれる)

ポイントマークを右クリックし、出てきたメニューから「この場所について」を選択。

表示された小窓の下の行の数字がその場所の緯度と経度なのでコピー。

zoom=”” マップの倍率を指定

この部分で自分の記事に合う地図の倍率を決めてやるらないと、見た人は何だかわかりません。(simplemapのデフォルトは16)

ここは、私の場合12位をよく使うので12で記事を作り、プレビュー画面を見てサイズを確定しています。

+ボタン一回押しで+1-ボタン一回押しで-1というように調整します。(上のMap画像は+ボタンを7回押して丁度良い縮尺になったので倍率値は19になっています。)

width=”px” Map画像の横幅を指定

自分の好みの値にして画像の横幅を決めます。(上のMapは500px)

height=”px” Map画像の縦幅を指定

自分の好みの値にして縦幅を決めます。(上のMapは300px)

lat=”” 緯度(Latitude)を指定

ここにGooglemapのポイントを右クリックしたメニューの「この場所について」から緯度をコピーし書き込む。

Googlemapの数字は(35.941131, 139.245098)という感じで緯度、経度の順に表示されています。

lng=”” 経度(Longitude)を指定

ここにGooglemapのポイントを右クリックしたメニューの「この場所について」から経度をコピーして書き込む。

その場所にふさわしい名前を指定

[map zoom="●" width="●px" height="●px" lat="●" lng="●"]ここに適当な名前を指定する[/map]

ここで指定した文字はポイントをクリックすると表示されます。

地図を見るのに邪魔臭いのでお勧めしませんが、常時文字を表示させるには、infowindow=”open”を挿入してやれば最初から表示されます。

以上が、Simple Mapで正確に場所を表示する方法です。

モバイルでご覧の方へ

全てのコンテンツと、カテゴリー内の記事をタイトル一覧表示としたメニューを作りました。PCの方にも便利です。

モバイル用メニュー

人気記事ランキング

コメントを残す

CAPTCHA


*投稿されたコメントはブログ管理者の認証後に表示されます。

サブコンテンツ

このページの先頭へ