Googleマップ埋め込みタグのiframe書式例まとめ

Sat, 14 Aug 2021 13:05:14 +0900

書式例

赤田海水浴場の地図を表示する例

通常例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26355.54307992571!2d130.87437829737954!3d34.339204853827596!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3543123bc72ce0c3%3A0x3d98f38cb01c0f43!2z6LWk55Sw5rW35rC05rW05aC0!5e0!3m2!1sja!2sjp!4v1628905054118!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

キーワードで指定するシンプルな例

<iframe src="https://maps.google.co.jp/maps?output=embed&q=赤田海水浴場&z=15" width="100%" height="450"  style="border:0;" allowfullscreen="" loading="lazy"></iframe>

パラメーター参考

https://www.bricoleur.co.jp/blog/archives/4452 https://www.bricoleur.co.jp/blog/archives/4452

https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7 https://qiita.com/yu-rin-chi/items/41b37b4656ea504350c7

留意点

AMPページではwidth="100%"はエラーになるので、width="600"のようにピクセルで指定する必要があります。

layout="responsive"も加えておくと良いみたいです。（以下参考）

https://qiita.com/otsuky/items/9254065d41598cb242ce https://qiita.com/otsuky/items/9254065d41598cb242ce

その他参考

https://developers.google.com/maps/documentation/urls/get-started https://developers.google.com/maps/documentation/urls/get-started

https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b https://qiita.com/hiron2225/items/8d5cd1b6728b4d63434b

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

Tue, 09 May 2017 19:42:31 +0900

MovableTypeのブログをAMP対応にするため、AmpConvertというプラグインを入れています。You-Tube埋め込み用のiframeタグはamp-youtubeに変換してくれますが。それ以外のiframeタグはamp-frameにしてくれませんでした。

そこでテンプレート側で正規表現で置き換える方法で対応したのでメモ。

例えばGoogle Maps

例えばGoogleマップの地図をページを埋め込むためのタグが以下だったとします。

<iframe src="https://www.google.com/maps/embed?mid=0123456789" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

このを以下のようにしたいのです。

<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://www.google.com/maps/d/embed?mid=mid=0123456789" width="640" height="480"></amp-iframe>

AMP用テンプレートのソース

MovableTypeのAMP用に作ったテンプレートの本文の部分を以下のようにしました。

<mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work">
    <$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
    <$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>
    <mt:For regex_replace="$regex">
        <mt:EntryBody>
        <mt:EntryMore>
    </mt:For>
</mt:AmpConvert>

以下が正規表現でiframeをamp-iframeに置換前と置換後を指定している部分です。

<$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
<$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>

Googleマップの場合、amp-iframeに置き換えるだけなく、**sandbox=“allow-scripts allow-same-origin allow-popups”**がないとAMPページで地図が表示されませんでした。

Googleマップ on qwerty.work