WordPress Instant ArticlesプラグインでのGoogle Mapの出力方法

WordPressのInstant Articlesプラグインを使って、FBインスタント記事を出力して申請しましたが、Google Mapを以下のようなタグで出力している記事があると審査で記事内容が異なるエラーで審査が下りなかった。

<div class="gmap">
  <iframe src="https://www.google.com/maps/embed?pb=XXXXXXXXXXXX" width="600" height="450" frameborder="0" style="border:0" allowfullscreen=""></iframe>
</div>

※ pbのパラメータはダミーです

色々調べたが、具体的な解決方法が見つからず、YouTubeの動画出力の方法を参考に以下の手順で、出力されることが出来たので、メモとして残します。

WordPress管理画面の「Instant Articles」メニューから「Publishing Settings」にある「Custom transformer rules」で、「Enable custom transformer rules」にチェックを入れ以下のルールを追加しました。

{
  "rules": [
    {
      "class": "InteractiveRule",
      "selector": "//div[iframe]",
      "properties": {
        "interactive.url": {
          "type": "string",
          "selector": "iframe",
          "attribute": "src"
        },
        "interactive.height": {
          "type": "int",
          "selector": "iframe",
          "attribute": "height"
        },
        "interactive.width": {
          "type": "int",
          "selector": "iframe",
          "attribute": "width"
        },
        "interactive.iframe": {
          "type": "children",
          "selector": "iframe"
        }
      }
    }
  ]
}

※ 上記の「interactive.width」は、変換ツールのルールでは「column-width」とあったが、うまく行かなかったので、「interactive.width」にしたところ想定通りに出力されました

変換出力されたものは以下のようになりました。

<figure class="op-interactive">
  <iframe src="https://www.google.com/maps/embed?pb=XXXXXXXXXXXXXXX" class="no-margin" width="600" height="450"></iframe>
</figure>

※ 本来、地図は以下のURLにある要素にop-mapクラスにしたものを出力した方がいいみたいです
https://developers.facebook.com/docs/instant-articles/reference/map