WordPressで住所からGoogle Mapsを簡単表示

WordPressで住所からGoogle Mapsを簡単表示

住所からGoogle Mapsを表示させるにはプラグインを使ったやりたかなどがありますが、ここではプラグインは使わずにカスタムフィールドに登録した住所データを元にものすごく簡単に表示させる方法を紹介します。

一度設定しておけば、カスタムフィールドに住所を入力するだけでGoogle Mapsが表示されますので便利です。

カスタムフィールドに登録した住所データ

まずはカスタムフィールドを作成する必要があります。カスタムフィールドを現に使っている方はこの項目は必要ありません。カスタムフィールドを使用したことない方はよかったらカスタムフィールドに関してはWordPress 初めてのカスタムフィールドを参考にしてみてください。

カスタムフィールドに登録した住所データを呼び込むコードは下記のような感じになります。’所在地’の所はfieldnameで名前がちがってきます。

<?php echo get_post_meta($post->ID,'所在地',true); ?>

上記のコードを利用して住所からGoogle Mapsを表示させます。

Google Mapsを簡単表示

カスタムフィールドの住所コードを含むGoogle Mapsのコードが下記のようになります。
下記のコードをsingle.phpなどで表示させたい場所に書きます。

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

コードを見てもらえば分かるとおりコードの基本は、Googlemapsのサイトに地図を埋め込むタグiframeを元にコードを短縮して表示させるようにしています。
上記のコードで訂正する箇所はwidth=”630″ height=”350″のマップのサイズ、’所在地’のfieldname名をサイトに合わせて訂正してください。

このコードを設定しておけば、後はカスタムフィールドに住所を入力することでGoogle Mapsが表示されます。

※但しIEではたまに表示不具合があります。原因については問題の報告 – Google マップ 公式ヘルプフォーラムに書かれています。

住所と異なる位置に表示される場合の応急処置

たまに住所と異なる位置に表示される場合があるんですが、その場合は『住所スペース店舗名』などできちんと表示される場合があります。
例えば住所が『日南市南郷町中村乙732−1』になっているコメリハード&グリーンと言う店舗を表示させる場合は、日南市南郷町中村乙732−1では全く異なる位置に表示されてしまいますが
『日南市南郷町中村乙732−1 コメリハード&グリーン』の様に住所スペース店舗名で入力するときちんと表示されます。

携帯でGoogle Mapsを簡単表示

携帯でも住所用のカスタムフィールドのコードを利用して表示させます。但しこの場合はモバイル用のGoogle Mapsに移動して表示させる方法になります。

WordPressで携帯表示させる場合はKtai Style (携帯対応プラグイン)を使っていると思います。下記のコードをKtai Styleのsingle.phpなどで表示させたい場所に書きます。

<a href="http://maps.google.co.jp/maps?q=<?php echo get_post_meta($post->ID,'所在地',true); ?>">Google mapsで地図確認</a>

※’所在地’のfieldname名をサイトに合わせて訂正してください。

今の時点ではこの方法を紹介されているサイトはなくもしかしたらコードのミスなどがあるかも知れません。その場合は助言していただけると助かります。

最終更新日: 2013年2月7日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

WordPressで住所からGoogle Mapsを簡単表示の関連記事

WordPressで住所からGoogle Mapsを簡単表示” への6件のコメント

  1. ピンバック: 住所からGoogleMapsを簡単表示 | WordPress ワードプレス とは

  2. ピンバック: 住所からGoogleマップを簡単表示 | WordPress ワードプレス とは

  3. ピンバック: カスタムフィールドで簡単Googleマップ表示 | ホームページ制作WEBデザインに役立つ情報

  4. ピンバック: カスタムフィールドに住所を入力してGoogle Map を表示させる方法 | WordPress 覚え書き

  5. ピンバック: 住所からGoogleマップを簡単表示 - ワードプレスとは

  6. ピンバック: WordPressで住所からGoogle Mapsを簡単表示 | My Tips and Quotes

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*