住所から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>
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>
&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>
いろいろ探していたら他にも、
カスタムフィールドに座標数字を入力して、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マップを画像で表示したい時には、
↓こんな便利なジェネレータが提供されているんですネ!
知りませんでした。
各パラメータの説明はfine×3様の下記ページに解りやすく掲載されてます!
もし、
それでも上手く表示できなかったりした場合(特にモバイル端末?)には、
大岡山で働くホームページ制作会社アズーロの社長ブログ様の下記ページ
を参考すると解決するかもしれません!
記事は主にガラケーでのマップ画像表示を想定してのモノ?なようですが、
パラメータの順番などとても解りやすく解説してくれています!
感謝!!!