SCF（スマートカスタムフィールド）でグーグルマップを表示したい

はい、みなさんこんばんは。

今日はスマートカスタムフィールドを使用して、APIを使用せず、パラメーター指定でiframeに地図を埋め込む方法をご紹介します。

どういうことかというと、カスタムフィールドで用意したテキストエリアに入力した住所をiframeのグーグルマップで表示したい
という案件があり、いろいろ調べて実装に少し時間を要したので備忘録として残しておこうと思います。

なぜSCF（スマートカスタムフィールド）かというと、アドバンスカスタムフィールドの場合、カスタムフィールド作成時にマップを選べる仕組みがありますが
SCFに関してはそれらがなく、さらにAPIを実装するほど大がかり（と言うべきかはおいておいて：笑）ではない場合SCFを使用してさくっと実装する方法があまりネット上
落ちてなかったため、今回SCFという指定をしています。

他にもいろいろとやり方があるかもしれませんので、本来はAPIを取得してやるのが一番だと思います。（課金やクレジット登録などの面倒なことは多少考える必要はありますが…）
それと今回ご紹介する方法は、決して公式の方法ではありません。
もしかすると、突然地図が表示されなく可能性がある、非公式の方法です。そちらご了承いただいた上で実装試してみてください。

前置きが長くなりましたが、さっそくコードから。
あえてここではSCFの実装方法は省かせていただきます。
私の場合はループ内でこの地図を実装しました。

<?php $field_group = SCF::get( 'カスタムフィールドグループ名' ); foreach ( $field_group as $field_name => $field_value ) { ?>
<div class="map">
<iframe src="https://maps.google.co.jp/maps?output=embed&amp;q=<?php echo esc_html( $field_value['SCFで指定した名前'] ) ;?>" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>

ちなみに以下のiframeのソースでも実装しようとしましたが、うまくいきませんでした。

<?php $field_group = SCF::get( 'カスタムフィールドグループ名' ); foreach ( $field_group as $field_name => $field_value ) { ?>
<div class="map">
<iframe width="500px" height="500px" frameborder="5" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=<?php echo esc_html( $field_value['SCFで指定した名前'] ) ;?>&z=18&output=embed">
</iframe>
</div>

以上、みなさんも一度試してみてください！
また他にもこういった方法あるよ！という方は教えてください。

Share: