カスタム投稿の表示について(googlemap)

Question

ワードプレス初心者です。
advanced custom fieldにて作成したフィールドについてご教授お願いします。
ワードプレス4.9.1を利用中です。
テーマはBiz Vectorです。
カスタムフィールドにて作成した、mapの表示ができません。

googleのサイトからAPIキーを取得して
function.phpの最下部に下記コードを記述し（APIキーは変更済）
FTPでアップロード。
function my_acf_google_map_api( $api ){
$api['key'] = 'ここにAPIキー';
return $api;
}

その後、single-○○.phpに下記コードをしアップロード。

地図：<?php if ( post_custom('map') ) : ?>

<?php $addressformap = post_custom('map'); $addressformapencode = urlencode(mb_convert_encoding($addressformap,"UTF-8","auto")); ?> <iframe width="500px" height="500px" frameborder="5" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=<?php echo $addressformapencode; ?>&z=18&output=embed"> </iframe> <?php else : ?> <p>地図を表示できません。</p> <?php endif; ?><br />

そうすると訳の分からない世界地図が表示されます。
原因はなんのでしょうか？ご教授お願い致します。

Answer 1

そもそも設置方法が間違ってませんか？
公式のドキュメント通りにソースコードをコピペで問題なく表示できるはずです。

日本語での解説はコチラ。
Advanced Custom Fieldを使ってGoogle マップを埋め込む方法 | デザイナーのタネあかし

---

また、ソースコードはコードブロックで囲むようにしてください。
質問の編集画面からコードを選択し、<code>ボタンで挿入できます。

Comments

[azousan]

回答ありがとうございます。
ソースコードとは出力用の
<?php

$location = get_field('keisai-map');

if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?のことでしょうか？

javascript(jQuery)とCSSの用意との記述もありますが
ビズベクトルの場合CSSファイルがbizvektor_common.css,bizvektor_common_min.css,editor-style.css,style_bizvektor_admin.cssと4つありどれを修正すればいいかわかりません。

[退会済みユーザー]

出力用のコードはそれで合ってます。
get_field('keisai-map');だけ自分で用意したフィールド名に変更してください。

CSSはPHPファイルに埋め込めるようになっているので、該当のPHPファイルにそのまま貼り付けでOKです。<style>～</style>まで。