【WP】カスタムフィールドで住所を入力するだけで緯度経度を取得してGoogleマップとストリートビューを表示させる方法

Wordpress tips

カスタムフィールドに住所を入力するだけでGoogleマップとGoogleストリートビューを表示させちゃいましょう!

住所を入力するだけ!

お店の紹介サイトなどでGoogleマップを使用して地図を表示させるなんてことをするサイトは多いと思います。

店舗が少なければGoogleマップにアクセスしてコードを取得してコピペすればいいですが…
そんな面倒なことはやってらんない!って方は下記のコードを使ってみてください!

single.phpなどに仕込んでおくと住所を入力するだけでマップを表示してくれます。

手順

1.カスタムフィールドを作成

まずは「住所」を入力する項目をカスタムフィールドで作成します。

これはお好きな方法でOKです。 カスタムフィールドテンプレートなどのプラグインを使用するとさくっと作れますね。

2.single.phpなど表示させたい箇所に下記のコードを埋め込む


カスタムフィールドで入力した項目を【住所】の部分に読み込ませます。
これでGoogleマップが表示されます。

カスタムフィールドの出力コードはプラグインによって異なるので、使用しているプラグインに合わせて記述してください。

3.ストリートビューを表示させる

こちらは住所以外に緯度経度の情報が必要です。

今回はAdvance Custom Fieldを使用しています。
緯度の部分はlat、経度はlntというカスタムフィールドを設けて入力させています。

緯度経度の出し方は次の4.で!

4.緯度経度を出力する為にfunctions.phpに記述

住所のみでは緯度経度はわからないので、functions.phpに「記事を保存したら住所から緯度経度を勝手に生成してくれる」コードを記述しましょう。


//記事保存時に住所から緯度経度を取得する _latと_lntというカスタムフィールドを用意しておく
add_action('save_post','set_cf_latlng');
function geocode($address){
$req ='http://maps.google.com/maps/api/geocode/xml';
$req .='?address='.urlencode($address);
$req .='&sensor=false';
$xml = simplexml_load_file($req) or die('XML parsing error');

if ($xml->status =='OK') {
$loc[0] = (string)$xml->result->geometry->location->lat;
$loc[1] = (string)$xml->result->geometry->location->lng;
}
return $loc;
}
function set_cf_latlng($postID){
if($parent_id = wp_is_post_revision($postID))
{
$postID = $parent_id;
}
$address = get_post_meta($postID , '所在地',true);
if( $address ){
$location = geocode($address);
if ( !add_post_meta($postID, '_lat', $location[0], true) ) update_post_meta($postID,'_lat', $location[0] );
if ( !add_post_meta($postID, '_lnt', $location[1], true) ) update_post_meta($postID,'_lnt', $location[1] );
}else{
delete_post_meta($postID ,'_lat');
delete_post_meta($postID ,'_lnt');
}
}

また、カスタムフィールドで値を持たせる必要がありますので予めカスタムフィールドを作成しておく必要があります。 今回の場合は「_lat」と「_lnt」の2つです。

これでGoogleマップは怖くない

大量に住所情報を記述するサイト等にこのコードを組み込めば、住所のみでGoogleマップとGoogleストリートビューが作れちゃいます!