Quantcast
Channel: WordPressなら最高! »マニュアル
Viewing all articles
Browse latest Browse all 3

WordPressにGoogleマップ(個別も一覧ページも)

0
0
追記
GoogleマップAPI のバージョンがアップし、APIキーの取得が出来なくなったので、新規にこのプラグインを使うコトは出来なくなりました。
近日中に新しいAPI v3 で動く同機能のGoogleマップ プラグインをご紹介します。

WordPressプラグイン「Lightweight Google Maps」のご案内です。

記事中に場所の情報を入れるコトって多いですよね。レストランの紹介とか、観光名所とか…。そんな時、活躍しそうなプラグインを紹介します。

個別ページの記事中にマッピングされた地図を簡単に置くことができますし、地図だけのページを作って、そこへすべての個別ページのマッピングを集約することもできます。記事中の地図と集約された地図は互いにリンクしているので、とても便利です。

まずは、サンプルから。

◆個別ページのGoogleマップ「マドリッド 2日目(10月15日 土曜日)の昼食」(下の方)
※マーカーをクリックすると、下記の集約ページにジャンプします。

◆マーカーが集約されたページ「スペイン旅行
※マーカーをクリックすると、マーカーをセットした個別ページのタイトル・日付・概要が表示され、タイトルをクリックすると、個別ページにジャンプします。

プラグインの説明

◆座標を取得するためのwebサービス「Geocoding」をブックマークしておく。

プラグイン「Lightweight Google Maps」のダウンロードはこちらから。

[1]
「Lightweight Google Maps」をダウンロードし、プラグインディレクトリにアップロード(/wp-content/plugins/lightweight-google-maps こんな感じ)。管理画面で有効化する。

[2]
個別ページのphpファイル(デフォルトでは、single.php)の地図を入れたい場所に 

<div id="google_maps"></div>

を貼る。

[3]
管理画面「設定」で「Google Maps」をクリック。開いた画面で目的の設定をする。画像参照

Lightweight Google Maps プラグイン設定画面Google Maps API キーを取得

 

[4]
いよいよ、投稿です。まず、地図にマークしたい場所の住所や観光名所の名を、ブックマークしておいた「Geocoding」の窓に入力し、座標の値を得る。画像参照

Geocodingで座標を調べる

 

[5]
投稿画面に移り(普通に記事を書き)、カスタムフィールドに下記の情報を入れ公開。地図が記事内に表示されます。

 名前・・・Lat_Long  値・・・座標の値をそのままペースト

カスタムフィールドに座標をペースト

 

[6]
マーカーが一覧できるページの作り方。

新規の固定ページにタイトルを入れ、本文入力部分に 

<div id="google_maps"></div>

を貼って、公開。公開したページのIDを「Lightweight Google Maps」設定画面の「固定ページ用地図」内「ページID」欄に記入し、保存。

以上です。お店の紹介などが多いサイトには超便利と思います。

WordPressにGoogleマップ(個別も一覧ページも) is a post from: WordPress なら最高!


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images