カスタムフィールド
0

住所からGoogleマップを簡単表示

WordPress(ワードプレス)でGoogle Maps(グーグルマップ)を表示するには便利なプラグインが多々ありますが、
プラグインなし!カスタムフィールドに日本語で入力した住所から、そのままGoogleマップを表示する方法です。

グルメポータルや不動産サイトなどなど、かなり使えそうな方法です!

簡単ホームページ作成支援-Detaramehp様の
WordPressで住所からGoogle Mapsを簡単表示 | 簡単ホームページ作成支援-Detaramehpより!(ありがとうございます!)

カスタムフィールドで、
「住所1」
「住所2」
のフィールドを作成。

「住所1」には「東京都港区六本木1-1-1」まで入力。
「住所2」には「ワールドプレスビル67階」など、ビル名などを入力。

テンプレートsingle.phpのマップを表示させたい箇所に下記コードを記述。

<iframe src="http://maps.google.co.jp/maps?q=<?php echo get_post_meta($post->ID,'住所1',true); ?>&z=14&output=embed" height="350" width="630" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

住所からGoogleMapsを簡単表示1
大きさを変更したい時は、

 width="400" height="300"

この数字を変更。

ズームインしたい時は、

 &z=17

この数字を大きくすればOK!

<iframe src="http://maps.google.co.jp/maps?q=<?php echo get_post_meta($post->ID,'住所1',true); ?>&z=17&output=embed" height="300" width="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

住所からGoogleMapsを簡単表示2
でも、これだと吹き出しがジャマになるので、

 &output=embed&iwloc=B"

とすれば吹き出しが非表示になります。

<iframe src="http://maps.google.co.jp/maps?q=<?php echo get_post_meta($post->ID,'住所1',true); ?>&z=17&output=embed&iwloc=B" height="300" width="400" frameborder="0" marginwidth="150" marginheight="0" scrolling="no"></iframe>

住所からGoogleMapsを簡単表示3

いろいろ探していたら他にも、
カスタムフィールドに座標数字を入力して、Googleマップを画像として表示する方法もありました。
WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go様の
お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる) | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Goより

Geocoding – 住所から緯度経度を検索などから、座標(経度・緯度)を取得(このサイトから取得した場合、緯度と経度の間のスペースは削除しておきましょう!)
↓↓
任意の名前をつけた(この例の場合はフィールド名「座標」)カスタムフィールドに取得した座標を入力

下記コードが記述された場所にGoogleマップの画像版が表示されます!

<img alt="" src="http://maps.google.com/staticmap?center=<?php echo post_custom(" />&markers=<!--?php echo post_custom("座標"); ?-->,redc&zoom=17&size=400x300&key=【Google Maps API Keyをココに記述】" width="270" height="270" class="imageframe" alt="" />

※試してみましたが、表示スピードを早くしたい時などは有効かもしれません。あとは画像なのでガラケーでも表示出来ますネ!
Google Maps API Keyが必要。(この情報は古いのかな!??API key無しでも出来る方法がありそう….)

追記:2014年2月14日

Googleマップを画像で表示したい時には、
↓こんな便利なジェネレータが提供されているんですネ!

Screenshot of gmaps-samples.googlecode.com

知りませんでした。

各パラメータの説明はfine×3様の下記ページに解りやすく掲載されてます!

Screenshot of www.finefinefine.jp

もし、
それでも上手く表示できなかったりした場合(特にモバイル端末?)には、
大岡山で働くホームページ制作会社アズーロの社長ブログ様の下記ページ

Screenshot of blog.livedoor.jp

を参考すると解決するかもしれません!
記事は主にガラケーでのマップ画像表示を想定してのモノ?なようですが、
パラメータの順番などとても解りやすく解説してくれています!

感謝!!!

関連記事
カスタムフィールド値の文字数を制限して表示
カスタムフィールド固定,簡単にカスタマイズするプラグイン【Custom Field Template】
カスタムフィールドのカレンダーから日付入力して曜日まで表示する