WordPressの記事内にて、iframeを使ってGoogle Mapを表示させたいが、非表示になってしまう

Question

前提・実現したいこと

WordPressの記事内、又はテーマの入力欄にてGoogle Mapの埋め込みをしようとしています。

APIも試してみましたが、できればiframeで実装したいと考えております。

発生している問題・エラーメッセージ

Google Mapが全く表示されず、非表示となってしまいます。

記事内に入力してみても、ディベロッパーツールで見るとiframeタグすら消えております。

---

↓テーマの入力欄

---

↓実際に表示される画面（何もない隙間）

該当のソースコード

テキスト編集で入力したコードは、Google Mapをコピペしたものです。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1429.0336000710063!2d130.55949776775427!3d31.5836038452212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x353e60a92cb63545%3A0xd501c6762e4a9fb5!2z44CSODkyLTA4MzQg6bm_5YWQ5bO255yM6bm_5YWQ5bO25biC5Y2X5p6X5a-655S677yW4oiS77yR77yY!5e0!3m2!1sja!2sjp!4v1570606391734!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

試したこと

下記、いずれの方法もダメでした…。
-cssで{display:block !important}を指定

• Google APIを取得し、先程のテーマの入力欄に住所を入力

• プラグインをすべて停止

• Map用のプラグイン「simple map」を導入し[map=~]のようなコードで入力

• テーマのfunctions.phpに以下を追加し、権限者の許可

add_filter('content_save_pre','test_save_pre');

function test_save_pre($content){
	global $allowedposttags;
	$allowedposttags['iframe'] = array('class' => array () , 'src'=>array() , 'width'=>array(),
	'height'=>array() , 'frameborder' => array() , 'scrolling'=>array(),'marginheight'=>array(),
	'marginwidth'=>array());
  return $content;
}

補足情報（FW/ツールのバージョンなど）

テーマ

• TOKI

既存のプラグイン（有効化してあるもの）：

• AddQuicktag
• All One SEO Pack
• Classic Editor
• Google XML Sitemaps
• Intuitive Custom Post Order
• Table of Contents Plus
• TinyMCE Advanced

---

追記20191021
投稿ページのphpと、ディベロッパーツールでの検証結果を載せます。何かお気づきになられましたらご教授お願い致します。

       // access --------------------------------------------------------------------------------------------------------------
       if(!empty($access_address)){
  ?>
  <div id="access_info">

   <?php if($access_headline) { ?>
   <h2 class="headline rich_font"><?php echo nl2br(esc_html($access_headline)); ?></h2>
   <?php }; ?>

   <?php if ($access_address){ ?>
   <div id="access_google_map">
    <div class="pb_googlemap clearfix">
     <div id="about_page_google_map" class="pb_googlemap_embed"></div>
    </div><!-- END .pb_googlemap -->
    <script>
      jQuery(function($) {
        $(window).load(function() {
          initMap('about_page_google_map', '<?php echo esc_js( $access_address ); ?>', <?php echo esc_js( $access_saturation ); ?>, <?php echo esc_js( $use_custom_overlay ); ?>, '<?php echo esc_js( $marker_img ); ?>', '<?php echo esc_js( $marker_text ); ?>');
        });
      });
    </script>
   </div><!-- END #access_google_map -->
   <div id="address_data" class="clearfix">
    <div class="address">
     <?php if($access_name) { ?><p><?php echo esc_html($access_name); ?></p><?php }; ?>
     <p><?php echo esc_html($access_address); ?></p>
    </div>
    <?php if($access_btn_url) { ?>
    <div class="button">
     <a href="<?php echo esc_url($access_btn_url); ?>" target="_blank"><span><?php echo esc_html($access_btn_label); ?></span></a>
    </div>
    <?php }; ?>
   </div>
   <?php }; ?>

  </div><!-- #access_info -->
  <?php }; ?>
コード

Comments

[Lhankor_Mhy]

ソースコードをご提示ください。
埋め込みコードは問題なく表示されましたので、ご提示いただいていない部分に原因があるのだと思います。

[CHERRY]

iframe 自体は問題なさそうなのですが、どのようにして（どの画面のどの部分に）、Google Map の iframe コードを　WordPress に入力しているのでしょうか？

[HayatoKamiyama]

ソースコードはどこまで載せればよいのか分からなかったので、とりあえず本文周辺の所を載せました。
iframeは本文の記入欄に入力してあります。（画像参照）
よろしくお願い致します。

[Lhankor_Mhy]

繰り返しになりますが、埋め込みコードは問題なく表示されましたので、ご提示いただいていない部分に原因があるのだと思います。
なので、まだご提示いただいていない部分のコードをご提示いただかないと、原因を推測するのは難しいかと思います。

Answer 1

Google Maps Embed APIのキーが必要です。以前は取得しなくても表示できることができました。
以下のソースコードの{APIKey}の部分を取得したAPIキーに置き換えてください。

<iframe src="https://www.google.com/maps/embed/v1/place?key={API Key}&q=%E3%80%92892-0834%20%E9%B9%BF%E5%85%90%E5%B3%B6%E7%9C%8C%E9%B9%BF%E5%85%90%E5%B3%B6%E5%B8%82%E5%8D%97%E6%9E%97%E5%AF%BA%E7%94%BA%EF%BC%96%E2%88%92%EF%BC%91%EF%BC%98"></iframe>

URLの&q=の後の部分は、住所をURIでエンコードしたものです。

詳しくは、Google Maps Embed APIのドキュメントを参考にしてください。

Comments

[HayatoKamiyama]

ご丁寧な説明ありがとうございます。
試してみましたが、ダメでした…。引き続き試行錯誤してみます。